current position:Home>On the new feature of CSS3: Animation

On the new feature of CSS3: Animation

2021-08-27 05:43:35 Poached egg roll

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

copyright notice
author[Poached egg roll],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827054331470Z.html

Random recommended