On the new feature of CSS3: Animation

This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details ：8 Yuegengwen challenge

@keyframes

@keyframes（ Keyframes ）, Used to create animation , It controls by defining the style of keys in the animation sequence CSS Intermediate steps in the animation sequence . and transition comparison ,@keyframes You can control the intermediate steps of the animation sequence .

grammar ：

@keyframes <keyframes-name> {
  <keyframes-selector> {
    <css-styles>
  };
}

 Copy code 

• <keyframes-name>： Essential . Definition keyframes The name of .
• <keyframes-selector>： Essential , Animation duration .
  • from, Equivalent to 0%.
  • to, Equivalent to 100%.
  • <percentage>, The point in time in the animation sequence that triggers the keyframe , Use percentages to express .
• <css-styles>：CSS attribute

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
 Copy code 

The start or end state of the animation is not specified

If a keyframe rule does not specify the start or end state of the animation （ That is to say ,0%/from and 100%/to, The browser will use the existing style of the element as the starting point / End state . This can be used to start element animation from the initial state , Finally return to the initial state .

Repeat the definition

• Multiple keyframes use the same name , Subject to the last definition （ Cover the previous ）.

  /*   Invalid  */
  @keyframes mymove {
    to {
      transform: translateX(50%);
    }
  }
  /*   It works  */
  @keyframes mymove {
    to {
      transform: translateX(100%);
    }
  }
   Copy code 

• In a @keyframes Inside , The percentage of keyframes is duplicated , This is merged into one .

  @keyframes mymove {
    to {
      background-color: blue;
    }
    to {
      transform: translateX(100%);
    }
  }
  
  /*  After the merger  */
  @keyframes mymove {
    to {
      background-color: blue;
      transform: translateX(100%);
    }
  }
   Copy code 

• In the same keyframe , The same attribute is repeatedly defined , The last defined attribute shall prevail （ Cover the previous ）.

  @keyframes identifier {
    50% {
      top: 30px; /*   Invalid  */
      left: 20px;
    }
    50% {
      top: 10px; /*   It works  */
    }
  }
   Copy code 

In keyframes !important.

In keyframes !important Will be ignored .

@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important; /*  Ignore  */
  }
  to {
    margin-top: 100px;
  }
}
 Copy code 

CSSKeyframesRule

JavaScript Can pass CSSKeyframesRule visit @keyframes：

let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
 Copy code 

animation

@keyframes After creating the animation , Bind it to a selector , The animation will take effect .

animation The attribute is animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode and animation-play-state A shorthand form of attributes .

grammar ：

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

• The order of attribute values in each animation definition is important ： It can be interpreted as <time> The first value of is assigned to animation-duration, The second one is assigned to animation-delay.

animation-name（ It's necessary ）

animation-name, Specify the name of the animation , Each name represents a by @keyframes Defined animation sequence .

grammar ：

animation-name: keyframename|none;
 Copy code 

• none： No keyframes （ Disable animation ）.
• keyframename： Key frame name .

animation-duration（ It's necessary ）

animation-duration, Specify the duration of an animation cycle , The default is 0s.

grammar ：

animation-duration: time;
 Copy code 

• time： The length of an animation cycle , The unit is in seconds (s) Or milliseconds (ms), Invalid without unit value .

animation-timing-function

animation-timing-function, Specify how the animation will complete a cycle （ Speed curve ）. The default is "ease". About timing-function You can refer to transition-timing-function part .

animation-delay

animation-delay Property defines when the animation starts , The default is 0s.

Tips : Allow negative values ,-2s Make the animation start right away , But skip 2 Seconds into the animation .

grammar ：

animation-delay: time;
 Copy code 

animation-iteration-count

animation-iteration-count, Define how many times the animation should play , The default is 1 Time .

grammar ：

animation-iteration-count: value;
 Copy code 

• infinite： Infinite loop animation .
• <number>： The number of times the animation plays ; The default value is 1.
  • You can define cycles with decimals , To play part of the animation cycle ： for example ,0.5 Play to half of the animation cycle .
  • Don't be negative .

animation-direction

animation-direction, Indicates whether the animation plays in reverse , The default is normal.

• normal, The default value is . Play the animation as normal .
• reverse, The animation plays in reverse , At the end of each cycle, the animation runs from the end to the end .
• alternate, Animation turn back operation . in other words , Animation in odd times （1、3、5...） Forward play , In even numbers （2、4、6...） Reverse play .
• alternate-reverse, Animation reverse turn back operation . in other words , Animation in odd times （1、3、5...） Reverse play , In even numbers （2、4、6...） Forward play .

animation-fill-mode

animation-fill-mode, Set the state of the animation before and after execution （ The style applied to the element ）.

• none： The default value is , No state of retention or processing .

• forwards： Keep the calculated value of the last key frame during animation execution .

  The last keyframe depends on animation-direction and animation-iteration-count Value ：

  animation-direction	animation-iteration-count	The last keyframe
  normal	/	100% or to
  reverse	/	0% or from
  alternate	even numbers	0% or from
  alternate	Odd number	100% or to
  alternate-reverse	even numbers	100% or to
  alternate-reverse	Odd number	0% or from

• backwards： The first key frame of the animation , And in animation-delay Keep this value during .

  The first keyframe depends on animation-direction Value ：

  animation-direction	The first keyframe
  normal or alternate	0% or from
  reverse or alternate-reverse	100% or to

• both： The animation will follow forwards and backwards The rules of , So we can extend the animation properties in two directions .

animation-play-state

animation-play-state, Whether the animation is running or pausing . The default is running.

grammar ：

animation-play-state: paused|running;
 Copy code 

• paused： The current animation has stopped .
• running： The current animation is running .

stay JS in , You can query it to determine whether the animation is running , You can also modify it to control the pause of animation . For example, control. .active：

.animate {
  animation-play-state: paused;
}
.active.animate {
  animation-play-state: running;
}
 Copy code 

Resume a paused animation , When it will pause , Instead of starting at the beginning of the animation sequence .

Talking about CSS3 New characteristics

• Border Frame
• Background background & Gradient The gradient
• Text written words & @font-face typeface
• Transform Element conversion
• Transition Transition effects
• Animation Animation