Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.