Two animation summaries of CSS

About transition Summary of

transition It means transition , The function is to add a transition effect between the beginning and end of an animation .

Property value

Transition function , There are the following ：

• liner ： uniform
• ease-in： Speed up
• ease-out： Slow down
• ease-in-out： Speed up and then slow down
• cubic-bezier： Three Bessel curves , Can be customized

grammar

transition: Property name Duration The way of transition Delay

transition: right 4s; 
transition: right 4s ease-in-out;
transition: right 4s ease-in-out 1s; 
 Copy code 

You can separate two different attributes with commas

transition: margin-right 4s, color 1s; 
 Copy code 

It can be used all Represents all attributes

transition: all 0.5s ease-out;
 Copy code 

limitations

transition The advantage is that it's easy to use , But it has a few big limitations .

• transition Need event triggering , So it can't happen automatically when a web page loads .
• transition It's disposable , It can't happen again , Unless it's triggered over and over again .
• transition Only start and end states can be defined , You can't define intermediate states , That is to say, there are only two states .
• One transition The rules , Only one property change can be defined , Cannot involve multiple attributes .

Be careful

• Not all attributes can be transitioned ,display: block -> none There's no transition
• It's usually used visibility: visible -> hidden perhaps opacity : 1 -> 0 replace

About animation Summary of

animation Part of the

• Keyframes keyframes
• animation attribute

Because we can specify keys at any point , therefore animation It can be used for more complex animation

@keyframes

CSS3 Of animation Making animation effect mainly includes two parts ：
1. Declare an animation with keyframes
2. stay animation Call the animation of the keyframe declaration .

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}
 Copy code 

• If 0% or 100% Don't specify keyframes , The default attribute value of this element will be used
• If there is a negative percentage or higher than 100% Percent of , The keyframe will be ignored
• If there are multiple @keyframes, The browser only recognizes the last @keyframes The value of the inside
• Empty keyframes The rules are valid , They override the previous valid keyframe rules

animation attribute

（1）animation-name：none As the default value , There will be no animation , If multiple animations try to modify the same properties , Then the back of the animation list overrides the front

（2）animation-duration： The default value is 0,0s It means there is no time for animation , Duration cannot be negative

（3）animation-timing-function： And transition-timing-function equally \

（4）animation-delay： The amount of time to wait before starting the animation . If it's negative , Note that the animation skips 2 Seconds into the animation cycle
（5）animation-iteration-count： Define the number of times the animation plays , The default is 1, If infinite, Then play in an infinite loop

（6）animation-direction： The default is nomal, Each loop is played forward ,（0-100）, The other value is alternate, If the animation is played an even number of times, play it forward , If it is a cardinal word, play it in the opposite direction

（7）animation-state： The default is running, Play ,paused, Pause

（8）animation-fill-mode： Define what happens before and after the animation starts , The default value is none, When the animation ends, it returns to the state when the animation did not start ;forwards, After the animation, continue to apply the position of the last key , That is, save the end state ;backwards, Get the animation back to the first frame ;both： Alternate application forwards and backwards The rules .

grammar

animation: name duration timing-function delay iteration-count direction play-state fill-mode