How to realize the Animation effect of small Ball Parabolic Motion by CSS
This article will explain in detail how CSS realizes the animation effect of small ball parabola movement. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
The parabolic motion of an object is physically divided into horizontal motion (uniform velocity) and vertical motion (acceleration). The same is true with the principle of css3. Using this element requires two layers, one layer to control the level, and the other layer to control the vertical. In css3, the speed can be set through transition or animation-the Bezier curve of timing-function. The slope of the Bezier curve is the speed of the object's motion. Therefore, if you set different Bezier formulas for the vertical motion, you can get all kinds of curvilinear motion, such as up-throwing, flat-throwing, twisting and so on.
The main implementation of the following html part is mainly two layers of div: one controls the horizontal movement and the other controls the vertical movement.
In css, it is also relatively simple to directly animate horizontal and vertical motion and animate.
* {margin:0;padding:0} / * simple browser compatibility * /
/ * set the initial style * /
.item, .item2 {
Width:20px
Height:20px
Display:inline-block
Position:absolute
Top:50px
Left:20px
Background-color:#00aa00
Border-radius:50%
}
/ * Vertical movement * /
.wraper {
Animation:vertical-animation2s.5s2
Animation-timing-function:cubic-bezier (.11mai Yu .33jue .55jue .11)
}
/ * horizontal movement * /
.wraper.item {
Animation:hor-animation2slinear.5s2
}
@-moz-keyframeshor-animation {
0% {transform:translateX (0px);}
100% {transform:translateX (400px);}
}
@-webkit-keyframeshor-animation {
0% {transform:translateX (0px);}
100% {transform:translateX (400px);}
}
@-moz-keyframesvertical-animation {
0% {transform:translateY (0px);}
100% {transform:translateY (400px);}
}
@-webkit-keyframesvertical-animation {
0% {transform:translateY (0px);}
100% {transform:translateY (400px);}
}
What is mainly used is the slope of the Bezier curve, that is, the velocity of the object can draw all kinds of curves according to different slopes.
This is the end of this article on "how to achieve the animation effect of the parabolic movement of a small ball in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.
