current position:Home>Two animation summaries of CSS

Two animation summaries of CSS

2021-08-27 07:57:20 Fat tiger 256

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


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 


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


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 .


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

copyright notice
author[Fat tiger 256],Please bring the original link to reprint, thank you.

Random recommended