In the previous lessons, we've covered 2D transformations, including moving, rotating, and scaling, and in this lesson we'll talk about CSS animations in HTML.
1.css the difference between animation and transition
1) Css transitions need to have an event trigger (like hover, etc.) to work, while css animations don't.
2) Animations can define many keyframes, while transitions cannot.
3) Use transitions and animations to make a mouse hover when the effect is generated, when the mouse is moved away, the effect made with the transition will slowly change back to the original appearance, and the animation is a change back to the original appearance.
2.css the basic operation of the animation:
The first step is to define an animation
@keyframes Name of the animation {
0% {
The starting position of the animation
}
100% {
The final position of the animation
The second step is to use animations:
First use the animation-name to call up the name of the animation, and then use the organization-duration to set the duration of the animation.
3.css animation examples:
We set up a div element and make it possible to move from left to right when the page is open.
As a first step, set up a div element:
In the second step, we first define an animation with a starting position of 0 and a movement of 1000 pixels to the right, where 0% represents the starting position and 100% represents the final position, and we set the movement of the image by translateing.
In the third step, after defining the animation, we need to call the name of the animation through the identity-name and set the duration of the animation with the animation-duration.
This completes a simple animation effect.