This is the 23rd day of my participation in Gwen Challenge

animation(Animation) : Animation properties.

Now let’s look at animation.

CSS animation properties are animation-name, animation-duration, animation-timing-function, animation-delay, A shorthand form of the animation-rotund-count, animation-direction, animation-fill-mode, and animation-play-state properties. So, the animation has this many child properties.

1, the animation – name

A series of animations that specify the application. Each name represents an animation sequence defined by @keyframes. @keyframes defines an animation, and the animation name defined by @keyframes is used by animation-name. So this @keyframes is just a name and a definition. Animation-name must be used in conjunction with @keyframes because the animation name is defined by @keyframes.

We also need to set its duration animation-duration

    img {
        width: 100px;
        height: 100px;
        animation-name: myAnimation;
        animation-duration: 2s;
    }
    
    @keyframes myAnimation {
        0% {
            width: 50px;
            height: 50px;
        }
        50% {
            width: 100px;
            height: 100px;
        }
        100% {
            width: 50px;
            height: 50px; }}Copy the code

The @keyFrames above is the name that defines the animation myAnimation and styles the keyframes. That is, @keyframes names an animation, and animation-name represents the animation that uses that name.

2, the animation – duration

Animation-duration: animation-duration: animation-duration: Animation-duration: Animation-duration: Animation-duration: Animation-duration: Animation-duration: Animation-duration: Animation-duration The longer we set the duration, the slower it will animate. Can compare the two 👇

3, the animation – timing – function

This property sets the transition property of the animation. This is the rhythm that CSS animations execute in each animation cycle.

  • Ease: Low speed starts and ends, but the middle speed is fast.

  • Ease-in: Start slow and speed up slowly.

  • Ease-out: the normal speed starts and slows down at the end.

  • Ease-in-out: The animation starts and ends at a low speed. There’s no acceleration in the middle.

  • Linear: goes at a constant speed.

👇

Alternatively, its value can be the function 👉cubic-bezier()

The cubic- Bezier () function defines a Cubic Bezier curve.

Bessel curves are defined by four points P0, P1, P2, and P3, according to the documentation. P0 and P3 are the beginning and end of the curve. P0 is (0,0) and represents the initial time and state, and P3 is (1,1) and represents the final time and state.

photo

The cubic-bezier() function has 4 values: P0 default (0,0), P1 (x1,y1), P2 (x2,y2), P3 default (1,1)

(1) Animation runs at a constant speed. This keyword represents the buffer function cubic- Bezier (0.0, 0.0, 1.0, 1.0).

You can see whenCubic - the bezier (0.0, 0.0, 1.0, 1.0), withlinearIt’s the same effect.

(2) The animation starts slowly, then suddenly accelerates, and finally moves slowly to the target. This keyword denotes the buffer function cubic- Bezier (0.25, 0.1, 0.25, 1.0)

(3) You can define more than one transition attribute. Such asAnimation-timing-function: ease, step-start, Cubic - Bezier (0.1, 0.7, 1.0, 0.1);

4, the animation – delay

Defines when the animation begins, that is, the length of time from when the animation is applied to the element until the animation begins. This is the delay time for the animation to start.

    .flower5 {
        animation-timing-function: linear;
    }

    .flower6 {
        animation-timing-function: linear;
        animation-delay: 3s;
    }
Copy the code

You can see that the image below started 3 seconds later than the animation above.

5, the animation – iteration – count

Defines the number of times the animation runs before ending, i.e. the number of cycles. The default is once. If we set it to 0, it doesn’t run. 👇

    .flower4 {
        animation-timing-function: linear;
        animation-iteration-count: 0;
    }

    .flower5 {
        animation-timing-function: linear;
        animation-iteration-count: 1;
    }

    .flower6 {
        animation-timing-function: linear;
        animation-iteration-count: 2;
    }
Copy the code

6, animation – direction

This property defines whether the animation is played backwards. Values: normal | reverse | alternate | alternate – reverse

  • normal

By default, the animation loops in the positive direction, which means that after each animation ends, it resets directly to the starting point.

  • reverse

Run the animation in reverse, running from end to end at the end of each cycle. That is, from the end to the beginning. After the end is also at the beginning.

  • alternate

The animation alternates and runs backwards. When running backwards, the animation steps back.

  • alternate-reverse

Alternating in reverse, alternating in reverse.

We uniformly set the number of cycles at 2👇

7, animation – fill – mode

This property defines how the CSS animation applies the style to its target before and after execution. Values: none | recently | backwards | to both

  • none

By default, when the animation is not executed, the animation will not apply any style to the target, but instead the CSS rules already assigned to the element will display the element.

  • forwards

The target will retain the value calculated by the last keyframe encountered during execution.

  • backwards

The value defined in the first keyframe is applied immediately when the animation is applied to the target and retained during animation-delay.

  • both

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

8, animation – play – the state

You can set the state, pause, and run of the object animation. Values: running | paused

    .flower5 {
        animation-play-state: running;
    }
    
    .flower5:hover {
        animation-play-state: paused;
    }
Copy the code

When we mouse up, we can see that the animation stops immediately and starts again when we move out. Depending on the business needs, we can specify a situation where the animation stops or starts.

conclusion

This paper summarizes various properties of animation. By understanding the meaning and value of these properties, we can achieve more cool animation. If you have any questions, you are welcome to point out criticism