What are the two ways to implement animation in css3

The two ways to implement animation in css3 are: 1. Use the transition attribute and transform attribute to set the transition and shape respectively; 2. Use the animation attribute animation to set the animation effect.

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

1. Use transition to set the transition, add transform to set the shape, and form an animation effect, as follows:

.divadd {
     transition: All 0.4s ease-in-out;
         -webkit-transition: All 0.4s ease-in-out;
         -moz-transition: All 0.4s ease-in-out;
         -o-transition: All 0.4s ease-in-out;
 
     transform:rotate(360deg);
    -ms-transform:rotate(360deg); /* IE 9 */
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
}

However, this method is relatively niche and difficult to control.

2. Add the animation attribute and set the animation effect as follows:

.a1 {
    position: absolute;
    animation: a1 3s;
    opacity: 0
}
@keyframes a1 {
    0% {left: 10px;opacity: 0}
    30% {left: 60px;background-color: pink;font-size:23px;opacity: 1}
    90% {left: 100px;background-color: red;opacity: 1}
    100% {left: 10px;opacity: 0}
}　

Various attribute values ​​can be added in the square brackets after the above percentage, such as transform ratote and left. . . . . . Don’t forget to set position absolute when adding positioning such as left top.

(Learning video sharing: css video tutorial)

All attributes are:

animation-name: myfirst;  //动画名称，用于animation引用
animation-duration: 5s;  //动画时长，
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

• animation-fill-mode setting The state after the animation ends

• none: Default value. Do not set the state other than the object animation, the state before the DOM is animated

• forwards: Set the object state to the state at the end of the animation, 100% or to, when animation-direcdtion is set When reverse is used, the first frame of keyframes will be displayed after the animation ends

• backwards: Set the object state to the state when the animation starts, (the test shows the DOM state before animation)

• both: Set the object status to the end or start state of the animation, the end state takes priority

Related recommendations: CSS tutorial

The above is the detailed content of What are the two ways to implement animation in css3. For more information, please follow other related articles on the PHP Chinese website!