animation

attribute

  1. Animation-name: indicates the name of the keyframe
  2. Animation-duration: execution time. Default: 0
  3. Animation-delay: indicates the animation delay. The default value is 0
  4. Animation-rotund-count: number of times an animation is played. The default value is 1
  5. Animation-derction: direction of animation execution
    • Normal: loops forward
    • Reverse: indicates the reverse operation
    • Alternate: alternate running in reverse
    • Alternate-reverse: indicates that alternate starts
  6. Animation-timing-function: defines the speed of animation execution

    • Cubic – Bezier (n,n,n,n) : Cubic Bezier curve

    • Steps: A step size function that divides the range of isometric steps

    • Ease: default, starting at low, speeding up, slowing down before ending, equal to cubic- Bezier (0.25, 0.1, 0.25, 1.0)

    • Linerar: Same speed, equal to cubic- Bezier (0.0, 0.0, 1.0, 1.0)

    • Ease-in: starting at low speed, equal to cubic- Bezier (0.42, 0.0, 1.0, 1.0)

    • Ease-out: end from low speed, equal to cubic- Bezier (0.0, 0.0, 0.58, 1.0)

    • 3. Ease-in-out: begins and ends with a low value equal to cubic- Bezier (0.42, 0.0, 0.58, 1.0)

    • Step -start: Steps (1, start)

    • Step-end: Steps (1, end)

  7. Animation-play-state: Controls animation running or pausing
    • pause
    • running
  8. Animation-fill-mode: Sets how the CSS animation applies styles to its target before and after execution
    1. None: No style is applied
    2. Forwards: The value of the last keyframe applied at the start
    3. Backwards: Apply the value of the first keyframe to start
    4. Both: applies values in both directions

Commonly omitted writing:

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
Copy the code

The text fades in from the left

<html>
    <head>
        <style>
            li {
                animation-name: slidein;
                animation-duration: 2s;
                animation-fill-mode: backwards;
            }
            li:nth-child(1) {
                animation-delay: 0;
            }
            li:nth-child(2) {
                animation-delay: 0.5 s;
            }
            li:nth-child(3) {
                animation-delay: 1s;
            }
            @keyframes slidein {
                0% {
                    opacity: 0;
                    margin-left: -40px;
                }
                100% {
                    opacity: 1;
                    margin-left: 0px; }}</style>
    </head>
    <body>
        <ul>
            <li>Hello World</li>
            <li>Hello World</li>
            <li>Hello World</li>
        </ul>
    </body>
</html>

Copy the code