Animation - Introduction to keyframes

Animation —Keyframes Introduce

Animation Animation

css3 by Animation Several properties provided by animation are as follows ：

animation-name: Specify the name of the animation , This attribute specifies an existing keyframe definition .

animation-duration: Specify animation duration .

animation-timing-funtion: Specifies the speed at which the animation changes .

animation-delay： Specifies how long the animation will be delayed before it starts executing .

animation-iteration-count： Specifies the number of times the animation is cycled .

animation: This is a composite property . The format of this attribute is ：

animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count.

keyframes( Keyframes )： Computer animation terminology , frame —— Is the smallest single image in the animation , It's equivalent to every frame of film . On the timeline of animation software, the frame is represented as a grid or a mark .

Keyframes —— Equivalent to in 2D animation Original painting . It refers to the frame where the key action in the movement or change of a character or object is located . The animation between key frames can be created by software , It's called a transition frame or an intermediate frame .

keyframes They are called keyframes , It is similar to Flash Keyframes in . stay CSS3 Among them, mainly “@keyframes” start , Followed by the animation name plus a pair of curly braces “{…}”, In brackets are some rules for different time periods .

@keyframes changecolor{

  0%{

   background: red;

  }

  50%{

   background: red;

  }

  100%{

    background: green;

  }

}

In a “@keyframes” A style rule in can consist of multiple percentages ,

If in “0%” To “100%” Create more percentages between , Add different styles to the elements that need animation effect in each percentage ,

So as to achieve a changing effect .

Call animation

animation-name attribute : It is mainly used to call @keyframes Defined animation .

Special attention required : animation-name The animation name to be called needs and “@keyframes” The defined animation names are exactly the same （ Case sensitive ）,

If inconsistent, it will not have any animation effect .

Property value ：

none: The default value is . The duty of none when , There will be no animation , This can be used to override any animation .

“@keyframes” Defined animation name .