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

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