This is the 23rd day of my participation in the August More Text Challenge

@keyframes

@keyframes, used to create animations, controls intermediate steps in A CSS animation sequence by defining the style of the keyframes in the animation sequence. In contrast to Transition, @Keyframes controls the middle steps of an animation sequence.

Grammar:

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

Copy the code
  • <keyframes-name>: Necessary. Define the name of keyframes.
  • <keyframes-selector>: Required, animation duration.
    • fromIs equivalent to 0%.
    • toIs equivalent to 100%.
    • <percentage>, the time point in the animation sequence when the keyframe is triggered.
  • <css-styles>: CSS properties
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

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

No start or end state is specified for the animation

If a keyframe rule does not specify the start or end state of the animation (that is, 0%/from and 100%/to), the browser will use the element’s existing style as the start/end state. This can be used to start an element animation from its initial state and eventually return to its initial state.

Repeat definition

  • Multiple keyframes use the same name, whichever was last defined (overrides the previous one).

    /* ❌ is invalid */
@keyframes mymove {
  to {
    transform: translateX(50%); }}/* ✅ valid */
@keyframes mymove {
  to {
    transform: translateX(100%); }}Copy the code

  • Within @keyframes, there is a duplication of the percentage of keyframes, which is combined into one.

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

  • In the same keyframe, the same attribute is defined repeatedly, using the attribute defined last time (overwriting the previous one).

    @keyframes identifier {
  50% {
    top: 30px; /* ❌ is invalid */
    left: 20px;
  }
  50% {
    top: 10px; /* ✅ valid */}}Copy the code

Keyframe in! Important.

Keyframes appear in! Important will be ignored.

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

CSSKeyframesRule

JavaScript can be accessed via CSSKeyframesRule @keyframes:

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

animation

After @keyFrames has created the animation, bind it to a selector for the animation to work.

The animation properties are animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, A shorthand property form for the animation-direction, animation-fill-mode, and animation-play-state properties.

Grammar:

animation: name duration timing-function delay iteration-count direction
  fill-mode play-state;
Copy the code
  • The order of property values in each animation definition is important: it can be resolved to<time>The first value of is assigned toanimation-durationAnd the second one is assigned toanimation-delay.

Animation-name (required)

Animation-name specifies the name of the animation, with each name representing an animation sequence defined by @keyframes.

Grammar:

animation-name: keyframename|none;
Copy the code
  • none: No keyframes (invalidates animation).
  • keyframename: Indicates the key frame name.

Animation-duration (required)

Animation-duration: specifies the duration of an animation cycle. The default is 0s.

Grammar:

animation-duration: time;
Copy the code
  • time: Duration of an animation cycle, in seconds (s) or milliseconds (ms).

animation-timing-function

Animation-timing-function, which specifies how the animation will complete a cycle (speed curve). The default is “ease”. See the transition-timing-function section for more information about timing-function.

animation-delay

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

Tip: Allow negative values, -2s to start animation immediately, but skip 2 seconds into animation.

Grammar:

animation-delay: time;
Copy the code

animation-iteration-count

Animation-iteration -count: defines how many times the animation should be played. The default is 1.

Grammar:

animation-iteration-count: value;
Copy the code
  • infinite: Plays animation in an infinite loop.
  • <number>: times of animation playback; The default value is 1.
    • Cycles can be defined as decimals to play part of the animation cycle: for example, 0.5 will play halfway through the animation cycle.
    • It cannot be negative.

animation-direction

Animation-direction: indicates whether the animation is played backwards. The default is normal.

  • normal, default value. Press the animation to play normally.
  • reverse, the animation is played in reverse, and the animation runs from end to end at the end of each cycle.
  • alternate, the animation goes back to run. That is, the animation is in odd order (1, 3, 5…). Forward, in even number of times (2, 4, 6…) Play in reverse.
  • alternate-reverseThe animation runs in reverse. That is, the animation is in odd order (1, 3, 5…). Play backwards, in even numbers (2, 4, 6…) Forward play.

animation-fill-mode

Animation-fill-mode sets the state of the animation (the style applied to the element) before and after execution.

  • None: Default value, no state retention or processing.

  • Forward: Preserves the last keyframe calculation during animation execution.

    The last key frame depends on the value of animation-direction and animation-rotund-count:

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

  • Backwards: animate the first keyframe and retain this value during animation-delay.

    The first keyframe depends on the animation-direction value:

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

  • Both: Animations follow the rules of forwards and backwards, extending animation properties in both directions.

animation-play-state

Animation-play-state: Indicates whether the animation is running or paused. The default is running.

Grammar:

animation-play-state: paused|running;
Copy the code
  • paused: The animation has been stopped.
  • running: The animation is currently running.

In JS, you can query it to determine whether the animation is running or modify it to control the animation’s pause. For example, control.active:

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

Resuming a suspended animation will start from the time it began to pause, rather than from the beginning of the animation sequence in the animation.

Brief introduction to the new characteristics of CSS3

  • Border Border
  • Background & Gradient
  • Text Indicates the Text & @font-face
  • Transform element Transform
  • Transition effect
  • Animation Animation
  • Column Multi-column layout
  • Resize & Box-sizing & Outline-offset
  • Images into the order
  • Button in the advanced
  • Multimedia Query