CSS animation classification

CSS # animation is mainly divided into CSS # animation classification, CSS common animation library introduction and JS # animation; Then CSS animation classification is divided into transition animation and keyframes animation. Keyframes are mainly introduced from keyframes rules and keyframes attributes. CSS commonly used animation introduction library introduction and js) animation are mainly animation Introduction of CSS, animate CSS uses examples and JS animation.

 

First, the basic concept of CSS animation classification:

1 transition animation

The animation generated by the transition from the initial state to the end state can only define the initial and accommodation States, and can not define the intermediate state. It is a very simple and most basic css animation. This transition animation can only be triggered passively, can not be triggered actively, and can not happen again. Passive trigger once, it occurs once, and cannot be repeated.

 

2 keyframe Animation

Using the key frame @ keyframes, the key frame is written as follows:

At each stage, we can define different element States, that is, css, which greatly enhances the animation ability of css.

To sum up, multiple states can be defined and more complex effects can be achieved. Compared with transition, it can be triggered actively or repeated.

@keyframes Animation name {
    point of time {
		Element state
	}
    point of time {
		Element state
	}
    point of time {
		Element state
	}
    point of time {
		Element state
	}
    ...
}

 

Second, browser support

The first browser version that fully supports this property

 

Basic grammar

.main {
   animation: animationname(Animation name) duration(Duration) timing-function(Time motion curve) delay(delay) iteration-count(Total number of repetitions) direction(Direction, forward or reverse) fill-mode(Define start and end states) play-state(Do you want to stop or run this animation);
}
    
 //Animation name is bound to keyframes. The animation state is defined under animation name. One is from To is from start to end. This is the same as transition. One is percentage, from 0% to 100%. Any intermediate state can be defined.
@keyframes animationname {
    from { css-code }
    to { css-code }
    
    0% - 100% { css-code }
}

 

1 animationname - keyframe name

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
    }
    
    @keyframes round {
        from { css-code }
        to { css-code }
    
        0% - 100% { css-code }
    }

 

2 duration - Animation duration (unit: s/ms)

    .main {
         width: 100px;
         height: 100px;
         background: red;
         position: relative;
         animation-name: round;
         animation-duration: 500ms;
         animation-iteration-count: infinite;
     }
     @keyframes round {
         0%  {
               top: 0%;
               left: 0%;
               background: red;
         }
         25% {
               top: 0%;
               left: calc(100% - 100px);
               background: blue;
         }
         50% {
               top: calc(100% - 100px);
               left: calc(100% - 100px);
               background: yellow;
         }
         75% {
               top: calc(100% - 100px);
               left: 0%;
               background: green;
         }
         100% {
               top: 0%;
               left: 0%;
               background: red;
         }
     }

 

3 timing function - time function curve

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);   //Bessel curve
    }

The time interval of timing function in animation is * * 4 delay between two sets of css Styles - Animation start delay time (unit: s/ms)

Define only the first start delay time

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    	animation-delay: 3s;
    }

 

5 iteration count - animation playback times

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
    }

In transition, you can't define the number of plays, but animation can. It can define two types: one is the specific number of plays (n) and the other is infinite loop.

Resource search website Encyclopedia https://www.renrenfan.com.cn Guangzhou VI design companyhttps://www.houdianzi.com

6 direction - animation playback direction

Animation is actually relative to time. Its playback direction is forward or reverse. It has four values:

normal, reverse, alternate, even reverse.

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
        animation-direction: alternate;
    }

 

7 fill mode - the style applied to the element when the animation is not playing

It is divided into two states, one is not started, the other is finished, that is, its cycle times are not infinite, so there are two key values: the attribute value will be applied to the animation after the animation is finished, that is, after the animation is played, we will continue to retain this attribute; Apply the style of the first frame before the animation starts. For example, there is a style, and then there is an animation. The animation does not start. At this time, we need to apply the first frame of the animation to the current element. In addition, there is another one, none, that is, restore the original style after the animation and both.

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }

 

8 play state - controls the animation to run or pause

There are two values: paused and running. Play state is generally applied to JS, which is used to control whether css is running.

Tags: Front-end

Posted by dionyssos on Tue, 03 May 2022 06:39:21 +0300