Basic knowledge of

Common CSS3 animation generally has tween animation (also known as “keyframe animation”) and frame by frame animation two kinds:

  1. Tween animation (keyframe animation): Automatically completes the transition from the start state to the end state. Don’t worry about the states in between.

Often used to achieve displacement, color (transparency), size, rotation, tilt and other changes. There are generally two ways to achieve Transitions and Keyframes Animation.

  • Transition: For simple animations, with only the first two frames. It is used for page interactive operation to make the interactive effect more lively.
  • Keyframes animation: used to achieve complex animations with many Keyframes. Animation timing-function is set toease,linearorcubic-bezier, it inserts a tween animation between each keyframe to produce a coherent animation.
  1. Frame-by-frame animation: Play frame by frame in a fixed order and speed. Like movie film.

Frame-by-frame animations can be used for loading animations, but more often for Sprite animations (character movements). Sprite animation puts all frames together and controls background-position through CSS3’s animation.

  • The timing-function of the animation should be used when jumping between key framessteps()Transition mode.

Transition

There are four attributes:

  1. transition-property: all;If you want all attributes to transition, use all.
  2. transition-duration: 1s;Duration of transition.
  3. transition-timing-function: linear;Motion curve. Attribute values can be:
  • Linear linear
  • Ease to slow down
  • Ease – in acceleration
  • Ease – out
  • Ease-in-out accelerates first and then slows down
  1. transition-delay: 1s;Transition delay. How long before performing the transition animation.

Short form: transition: the duration of the transition of which attributes the motion curve delay time transition: all 3s linear 0s;

Keyframes animation

Define animation steps:

  1. Define animation via @keyframes;
  2. Divide this animation into multiple nodes by percentage; Then each attribute is defined in each node.
  3. In the specified element, the animation property calls the animation.

The child properties of the animation are:

  • Animation-name: specifies the name of the keyframe described by @keyframes. This parameter is mandatory.

  • Animation-duration: mandatory, set the duration of an animation period.

  • Animation-rotund-count: Sets the number of iterations of the animation. You can specify infinite to repeat the animation.

  • Animation-direction: Sets whether the animation will run in reverse or start again after each run. Normal, alternate reverse.

  • Animation-delay: Sets the delay between the time the element is loaded and the time the animation sequence starts.

  • Animation-fill-mode: specifies how to apply styles to target elements before and after animation execution. Forwards maintains the state after animation ends (default), forwards returns to the original state after animation ends.

  • Animation-play-state: allows animation to be paused and resumed.

  • Animation-timing-function: sets the animation speed, that is, sets how the animation changes between key frames by creating an acceleration curve. Linear, ease-in-Out, Steps (), etc.

Except for the first two, which are mandatory and sequential, the latter attributes are optional and sequence-independent. Such as:

animation: move1 1s  alternate linear;
animation: move2 4s;
Copy the code

Typical cases

The progress bar


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div {
            margin: 20% auto;
            height: 10px;
            width: 300px;
            background: linear-gradient(#0ff, #0ff);
            background-repeat: no-repeat;
            background-size: 0;
            animation: move 2s linear forwards 3s;
        }

        @keyframes move {
            100% {
                background-size: 100%; }}</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
Copy the code

Add the loading effect


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            margin: 20% auto;
            text-align: center;
        }

        dot {
            display: inline-block;
            height: 1em;
            line-height: 1em;
            text-align: left;
            vertical-align: -.25em;
            overflow: hidden;
        }

        dot::before {
            display: block;
            content: '... \A.. \A.';
            white-space: pre-wrap;
            animation: loading 3s infinite step-start both;
        }

        @keyframes loading {
            33% {
                transform: translateY(-2em); 66%} {transform: translateY(-1em); }}</style>
</head>
<body>
<div class="container">Loading in progress<dot>.</dot>
</div>
</body>
</html>
Copy the code

The clock


      
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 3px;
            height: 200px;
            background-color: # 000;
            margin: 100px auto;
            transform-origin: center bottom;    /* The center of the rotation is the bottom */
            animation: myClock 60s steps(60) infinite;
        }

        @keyframes myClock {
            0% {
                transform: rotate(0deg); 100%} {transform: rotate(360deg); }}</style>
</head>
<body>
<div></div>
</body>
</html>
Copy the code

Circular progress bar


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            display: flex;
            justify-content: center;
        }

        .circle_process {
            position: relative;
            width: 200px;
            height: 200px;
        }

        .circle_process .wrapper {
            width: 100px;
            height: 200px;
            position: absolute;
            top: 0;
            overflow: hidden;
        }

        .circle_process .right {
            right: 0;
        }

        .circle_process .left {
            left: 0;
        }

        .circle_process .circle {
            width: 160px;
            height: 160px;
            border: 20px solid transparent;
            border-radius: 50%;
            position: absolute;
            top: 0;
            transform: rotate(-135deg);
        }

        .circle_process .right-circle {
            border-top: 20px solid green;
            border-right: 20px solid green;
            right: 0;
            animation: right-turn 5s linear infinite;
            /*animation-name: circle_right; // animation-duration: 5s; Animation-timing-function: linear; // The mode of animation playback is linear; animation-restage-count: infinite; // The number of times the animation plays, infinite is infinite */
        }

        .circle_process .left-circle {
            border-bottom: 20px solid green;
            border-left: 20px solid green;
            left: 0;
            animation: left-turn 5s linear infinite;
        }

        @keyframes right-turn {
            0% {
                transform: rotate(-135deg); Were 50% and 100%} {transform: rotate(45deg); }} @keyframes left-turn {
            0%, 50% {
                transform: rotate(-135deg); 100%} {transform: rotate(45deg); }}</style>
</head>
<body>
<div class="circle_process">
    <div class="wrapper right">
        <div class="circle right-circle"></div>
    </div>
    <div class="wrapper left">
        <div class="circle left-circle"></div>
    </div>
</div>
</body>
</html>
Copy the code