The transition properties

  1. animationAttributes areAnimation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, Animation-direction, animation-fill-mode and animation-play-stateA short form of attribute.
  2. Not all attributes are supportedanimation. supportanimationThe properties of the -CSS animated properties
  3. Used to specify one or more groups of animations separated by commas.
  4. Grammar:animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name

The animation-name property specifies the names of the sequence of animations to be performed on the element, each corresponding to the name of the animation sequence defined by @keyframes.

@keyframes

  1. @keyframes(keyframe), according to the rules used to define the style of the animation keyframe, to controlCSS animationsThe intermediate step.
  2. Used when defining an animation%Or keywordfromandtoTo set the change in the middle step of the animation.fromThe equivalent of0%.toThe equivalent of100%
  3. To get the best browser support, you should always define0%and100%Selector of.
  4. Grammar:
@keyframes< rule name > {0%   {top:0px; }25%  {top:200px; }50%  {top:100px; }75%  {top:200px; }100% {top:0px;}
}
Copy the code

animation-duration

  1. The animation-duration property specifies the animation duration. The default value is 0, which means no animation.
  2. The length of the animation cycle, in seconds(s)Or ms(ms), no units or negative values are invalid.

animation-timing-function

  1. The animation-timing-function property controls the timing of CSS animation execution.
  2. It specifies several default valueslinear|ease|ease-in|ease-out|ease-in-outTo achieve the moving effect. You can also usecubic-bezier(n,n,n,n)Function custom, move the curve.
  3. usesteps(n,[start | end])Jump animation, simple understanding is0% 到Next rule, the only changenSecond, not tween animation.

animation-delay

  1. Animation-delay THE CSS property defines when the animation starts, that is, the animation execution time is delayed.
  2. Values are available in seconds (s) and milliseconds (ms). If the unit is not set, the definition is invalid. 0s is the default time.
  3. Set negative value to start animation directly at the corresponding frame with reduced time.

animation-iteration-count

  1. The animation-rotund-count property defines the number of times an animation can be run before it finishes an infinite loop, with a default value of 1.
  2. Value:infiniteUnlimited time,<number>A positive number is a number of times, a decimal number is executed to the end of the corresponding position, and a negative number is invalid.

animation-direction

Animation-direction indicates whether the animation is played backwards. Normal At the end of each animation loop, the animation is reset to the starting point, which is the default. Alternate at the end of each animation cycle, the animation starts in reverse at the end point. Reverse executes the animation from the end point, in reverse. Alternate-reverse executes the animation from the end point, in reverse, to the start point, in reverse, to the end point, and repeats.

animation-fill-mode

  1. The animation-fill-mode property is used to set whether the style of the key frame is preserved before and after the animation is executed.
  2. The default valuenoneDo not modify any styles.
  3. forwardsWhen the animation is over, change the style of the element to the style of the last frame.
  4. backwardsWhen the animation starts, change the element style to the first frame style. For example, if the wait time is set, the wait time will also change the element style to the first frame style.
  5. bothfollowRecently and backwardsThe rule changes the style at the beginning and end.

animation-play-state

  1. The animation-play-state property defines whether an animation is running or paused.
  2. valuepausedThe specified animation has been paused.runningSpecifies that the animation is playing. Usually throughjsTo set this property to the element to control the animation.

Commonly used way

CSS3 3D planet rotation && browser rendering principle

Ripple effect

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style type="text/css">
      .animation {
        box-sizing: border-box;
        position: relative;
        width: 20px;
        height: 20px;
        margin: 100px auto;
        background: #409eff;
        border-radius: 50%;
      }

      .animation:after {
        box-sizing: border-box;
        content: "";
        display: block;
        position: relative;
        width: 20px;
        height: 20px;
        border: 5px solid #ff1883;
        border-radius: 50%;
        -webkit-animation: antSing 1.2 s ease-in-out infinite;
        animation: antSing 1.2 s ease-in-out infinite;
      }

      @keyframes antSing {
        0% {
          border-color: #409eff;
          -webkit-transform: scale(0.8);
          transform: scale(0.8);
          opacity: 0.5;
        }
        100% {
          border-color: #ff1883;
          -webkit-transform: scale(2.5);
          transform: scale(2.5);
          opacity: 0; }}</style>
  </head>
  <body>
    <div class="animation"></div>
  </body>
</html>
Copy the code
  • Through the animation property, set the element to grow while hiding, realize the ripple effect

Loading animation

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style type="text/css">
      .loading {
        background-color: # 000000;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
      }

      .loading-center-load {
        position: relative;
        height: 20px;
        width: 100px;
        margin: 200px auto;
      }

      .object {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 50%;
        -webkit-animation: object 2.5 s linear infinite;
        animation: object 2.5 s linear infinite;
      }

      .object_one{}.object_two {
        left: 20px;
        animation-delay: -0.5 s;
      }
      .object_three {
        left: 40px;
        animation-delay: -1s;
      }
      .object_four {
        left: 60px;
        animation-delay: -1.5 s;
      }
      .object_five {
        left: 80px;
        animation-delay: -2s;
      }
      @keyframes object {
        0% {
          left: 100px;
          top: 0;
        }
        80% {
          left: 0;
          top: 0;
        }
        85% {
          left: 0;
          top: -20px;
          width: 20px;
          height: 20px;
        }
        90% {
          width: 40px;
          height: 15px;
        }
        95% {
          left: 100px;
          top: -20px;
          width: 20px;
          height: 20px;
        }
        100% {
          left: 100px;
          top: 0; }}</style>
  </head>
  <body>
    <div class="loading">
      <div class="loading-center-load">
        <div class="object object_one">1</div>
        <div class="object object_two">2</div>
        <div class="object object_three">3</div>
        <div class="object object_four">4</div>
        <div class="object object_five">5</div>
      </div>
    </div>
  </body>
</html>
Copy the code
  • We need five balls to move, so let’s set the ball position.
  • Define the motion trajectory, usinginfiniteInfinite loop effect.
  • useanimation-delayProperty is set to a negative value, so that the animation loop for the first time, directly from the corresponding frame position to ensure the loop effect.

Use Sprite diagram to achieve animation

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style type="text/css">
      .loading {
        width: 75px;
        height: 140px;
        background: url(./1.png);
        margin: 100px auto;
        animation:imgFr 1s step-start infinite ;
      }
      @keyframes imgFr {
        0% {
          background-position: 0 0;
        }
        14.3% {
          background-position: -80px 0;
        }
        28.6% {
          background-position: -160px 0;
        }
        42.9% {
          background-position: -240px 0;
        }
        57.2% {
          background-position: 0 -143px;
        }
        71.5% {
          background-position: -80px -143px;
        }
        85.8% {
          background-position: -160px -143px;
        }
        100% {
          background-position: -240px -143px; }}</style>
  </head>
  <body>
    <div class="loading"></div>
  </body>
</html>
Copy the code
  • Mainly usingbackground-positionProperty gets the position of the figure in the image.
  • usestep-startMake the animation not a tween, but a jump animation.step-startIs equivalent tosteps(10,start)The animation is divided into 10 steps, and the left end of the animation is the beginning.