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

This article mainly introduces "CSS3 animation case analysis". In daily operation, I believe many people have doubts about CSS3 animation case analysis. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "CSS3 animation case analysis". Next, please follow the editor to study!

When it comes to CSS3 animation, we must talk about the four attributes of transform,translate,transition,animation. Transform mainly defines the actions of elements, such as rotation, tilt, displacement and so on. Translate is an attribute in transform, which is used for 2D/3D displacement. The last two mainly describe the action, animation time, speed curve, times and so on.

Here are some simple examples to get you started quickly:

Here hover event to change the width and background color, using transition to describe the animation, because we only describe the width, so the background color, mouse pointing up, will immediately change color, there will be no gradual process.

Why use transition instead of animation here? Then let's talk about the direct difference between them.

Transition needs to trigger an event, and animation can explicitly change the attribute value of the element css over time without triggering any event, so as to achieve an animation effect. The transition property is a simple animation property that is very simple and easy to use. It can be said that it is a simplified version of animation, and it is for ordinary people to do simple web page special effects.

Now you see, because we use the hover event, we use transition.

Let's look at the second example.

Here the animation starts from loading, so animation is used, changing the width and background color takes 1s, and the execution cycle is unlimited. The @ keyframes rule is to create an animation. -webkit- (chrome/safari),-ms- (ie) or-moz- (firefox) are used to be compatible with different browsers.

Transform:rotate rotates its div element 2D by 20 °. Of course you can set the 3D rotation of transform:rotateY, Y axis.

You can also set transform: translate for 2D and 3D displacement.

Transform: scale, 2DJE 3D zooming

Transform: skew, 2D tilt and so on.

At this point, the study of "CSS3 animation case analysis" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.