CSS to achieve a small ball parabolic motion animation effect (code)

Source: Internet
Author: User
This article brings the content is about the CSS to achieve the ball parabolic motion animation effect (code), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

The parabolic motion of an object is physically divided into horizontal motion (constant speed) and vertical motion (acceleration); This is the same with CSS3, which requires two layers, a level of control, and a layer of vertical control. In CSS3, the speed can be set by the transition or the Bezier curve of the animated-timing-function, and the slope of the Bezier curve is the velocity of the object moving, so the Bezier formula with different vertical direction can get the curve motion of the top throw, flat throw, twist and so on.

The main implementation of the following HTML part of the main two-level div a control horizontal movement, a control of vertical motion

    <div class= "Wraper" >         <!--Control vertical motion--        <div class= "Item" ></div> <!--control horizontal movement--    </div>    <div class= "item2" ></div>

In the CSS is also relatively simple to set the horizontal and vertical motion animation and animation settings directly

    *{MARGIN:0;PADDING:0}/* Simple browser-compatible *//* Set initial style */. Item,. item2 {width:20px;        height:20px;        Display:inline-block;        Position:absolute;        top:50px;        left:20px;        Background-color: #00aa00;    border-radius:50%;        }/* Vertical motion */. wraper {animation:vertical-animation 2s. 5s 2;    Animation-timing-function:cubic-bezier (. one,-. 33,.55,.11);    }/* Horizontal movement */. Wraper. Item {animation:hor-animation 2s linear. 5s 2;        } @-moz-keyframes hor-animation {0% {transform:translatex (0px);}    100% {Transform:translatex (400px);}     } @-webkit-keyframes hor-animation {0% {transform:translatex (0px);    } 100% {Transform:translatex (400px);}  } @-moz-keyframes vertical-animation {0% {transform:translatey (0px);    } 100% {Transform:translatey (400px);}     } @-webkit-keyframes vertical-animation {0% {transform:translatey (0px); } 100% {Transform:translatey (400px);} }

The main use of the

is that the slope of the Bezier curve is that the velocity of the object can be plotted according to different slope of the curve motion

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.