This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021.

preface

Animation properties play an important role in the implementation of CSS animation. Understanding the use of animation properties and the role they play in the process of creating animation can help us better achieve the desired animation effect.

@keyframes

Keyframes, used in conjunction with animation, are responsible for controlling key frames in CSS animations (animation just sets the rules for animation). In traditional animation design elements, it is called the key action, that is, in the interval of the scene changes, draw the key picture.

The percentage of animation time within @keyframes is 0% to 100%, and keyframes can be inserted at any time point. Each set of key frames is given a specific name.

@keyframes animationName { 0%{ ... 50%} {... 100%} {... }}Copy the code

@Keyframes follows the following rules:

  • When the start and end states are not specified (that is, 0% and 100%), the original state of the element is used as the start and end animation states.
  • When a non-animated property is used in a keyframe, the property is ignored and the other properties remain in effect.
  • Keyframe does not exist style cascade, same name@keyframesTake the last valid, namesake percentage take the last valid.
  • Use within keyframes! importantIs invalid.

animation

To create an animation, use @keyframes. Animation also contains several properties: Animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, Animation-direction, animation-fill-mode, and animation-play-state. By setting different values for these properties, various animation effects can be produced.

animation-name

This property specifies a series of animations to apply, with each name representing a key set of frames defined by @Keyframes.

animation-duration

Represents the length of an animation cycle. The value is a value with time units, which controls the duration of a series of animations. The shorter the duration, the faster the overall animation changes.

animation-timing-function

Define the execution rhythm of the animation for each cycle.

Timing-function is a mathematical function that describes how fast a one-dimensional value changes in an animation.

  • Cubic – Bezier () : Cubic Bezier curve.
  • Steps () : Step function

cubic-bezier

The curve has four key points, p0 and p1 are always represented as (0,0) and (1,1), so the smoothness of the curve is controlled by p1 and p2. (P1 controls the first half and P2 controls the second half); If p0 and P1 represent the start and end points of the animation, then the change of the curve represents the rhythm of the animation.

In the CSS, P1(x1,y1) and P2(x2,y2) are configured for control. Where X1 and X2 must satisfy the interval [0,1] (invalid if they exceed), Y1 and Y2 are not in the interval [0,1], which will produce reverse motion effect.

animation-timing-function: cubic-bezier(x1, y1, x2, y2);
Copy the code
<! Animation -timing-function:cubic-bezier(0.1, 0.7, 1, 0.1);Copy the code

The CSS provides some timing-functions evolved from cubic- Bezier () curve functions.

  • Linear:Cubic - the bezier (0.0, 0.0, 1.0, 1.0). Using this timing function, the animation transitions from the initial state to the final state at a constant speed.

  • Ease: This keyword indicates cubic- Bezier (0.25, 0.1, 0.25, 1.0). The animation starts slowly, speeds up in the middle, and ends slowly.

  • Ease-in: cubic- Bezier (0.42, 0.0, 1.0, 1.0). The animation starts slowly, then speeds up gradually, and finally maintains a certain speed until the animation stops.

  • Ease-out: This keyword represents cubic- Bezier (0.0, 0.0, 0.58, 1.0). The animation starts fast and then slows down.

  • Ease-in-out: This keyword represents cubic- Bezier (0.42, 0.0, 0.58, 1.0). With this timing function, the animation starts behaving like the ease-in function and ends behaving like the ease-out function, which is slow then fast then slow.

steps

Step function, defines an isometric step function.

The CSS steps() function takes two arguments. The first argument is the number of steps and the second argument is the direction of the function.

  • Start: indicates that a step is performed at the beginning
  • End: a step is performed at the end
animation-timing-function: steps(2,end);
animation-timing-function: steps(4,start)
Copy the code

The steps() function evolves with the following keywords:

  • Step-start: This keyword indicates steps(1, start). Using this timer, the animation jumps to the end state immediately and stays there until the animation ends.

  • Step-end: This keyword represents the timing function steps(1, end). Using this timing function, the animation remains in the initial state until the animation ends, and then jumps to the end state immediately.

animation-delay

Indicates the time delay for the animation to start executing. The default value is 0s

animation-iteration-count

Denotes the number of cycles of animation execution:

  • An infinite number of times
  • Number: indicates the number of cycles. The value can be a decimal. For example, 1.5 indicates one half cycle.
animation-iteration-count: infinite; Animation - iteration - count: 1.5;Copy the code

animation-direction

Indicates the direction of animation playback, that is, whether to reverse playback;

  • Normal: The default value. Each animation cycle starts from the starting point
  • Reverse: Each animation cycle starts at the end
  • Alternate: animation cycles, in which the animation moves backward, and at the same time, functions with the time function also reverse, e.g.,ease-inBecomes in reverseease-out.
  • Alternate-reverse: alternate running, starting from reverse;

animation-fill-mode

Set the style state before and after the animation starts.

  • None: The default. No animation styles are applied before or after the start.
  • Forwords: After the animation ends, the element remains in the animation state of the last frame.
  • Backwords: The state in which the first frame of the animation is applied to the element before the animation starts (before the animation starts, the period before the animation starts, for example, within the delay of animation-delay).
  • Both: applies at the same timeforwords 和 backwords. Before the animation starts, the first frame is applied to the element, and after the animation ends, the last frame is applied.

If timing-function is steps(1,end), fill-mode is set to forwords.

animation-paly-state

Define whether an animation is running or paused,

  • Running: Animation is running.
  • Paused: The animation is paused.

This property serves two purposes:

  1. Through the queryanimation-paly-stateValue to determine whether the animation is running or paused.
  2. By changing theanimation-paly-stateCan change the state of the current animation.

Animation related events

The events associated with the animation set by the animation are:

  • animationstart
  • animationend
  • animationend

By listening for these events, you can get information about the execution of the animation.