Three ways to implement animation in CSS3

This is a test of the interviewee's basic knowledge of CSS.

There are three main ways to implement animation in CSS

The first one is: transition to achieve gradient animation

The second is: transform transition animation

The third is: animation to implement custom animation

The following is a detailed description of the implementation methods of the three types of animations.

transition gradient animation

Let's first look at the properties of transition:

• Property: Fill in the CSS properties that need to be changed, such as width, line-height, font-size, color, etc., all properties that act on DOM styles;
• Duration: The time unit required to complete the transition effect (s or ms)
• timing-function: the speed curve of the effect (linear, ease, ease-in, ease-out, etc.)
  

The specific value of timing-function can be seen in the table below:

• delay: delay trigger time of animation effect (unit: ms or s)

Let's look at a complete example:

<div class="base"></div>

.base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width,height,background-color,border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        /*Abbreviation*/
        /*transition: all 2s ease-in 500ms;*/
            &:hover {
                width: 200px;
                height: 200px;
                background-color: #5daf34;
                border-width: 10px;
                border-color: #3a8ee6;
            }
        }

Operation effect:

You can see that when the mouse moves up, the animation starts with a delay of 0.5s, and because the border-color is not set in the transition-property, there is no gradient animation.

transform animation

The transform property applies a 2D or 3D transformation. This attribute allows us to rotate, scale, tilt, and move elements. It is usually used in conjunction with the transition attribute.

1. none: defines no conversion, generally used to register the conversion.
2. transform-functions: Defines the type functions to be transformed. The main ones are:

2.1 Rotate: mainly divided into 2D rotation and 3D rotation. rotate(angle), 2D rotation, the parameter is the angle, such as 45deg; rotate(x,y,z,angle), 3D rotation, 3D rotation around the line from the original position to (x,y,z); rotateX(angle), 3D rotation along the X axis; rotateY(angle); rotateZ(angle);

2.2 Scale: Generally used to set the size of an element. The main types are the same as above, including scale(x, y), scale3d(x, y, z), scaleX(x), scaleY(y), and scaleZ(z), where x, y, and z are the shrinkage ratios.

2.3 Skew: Mainly used to tilt the style of an element. skew(x-angle, y-angle), 2D skew transformation along the x and y axes; skewX(angle), 2D skew transformation along the x axis; skew(angle), 2D skew transformation along the y axis.

2.4 Translate: Mainly used to move elements. translate(x, y), defines the pixel points moved along the x and y axes; translate(x, y, z), defines the pixel points moved along the x, y, and z axes; translateX(x); translateY(y); translateZ(z).

<h5>Transition is used together with transform</h5>
<div class="base base2"></div>

.base2{
          transform:none;
          transition-property: transform;
          &:hover {
              transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
          }
      }

Operation effect:

You can see that the box is rotated, tilted, translated, and enlarged.

animationcustom animation

In order to achieve more flexible animation effects, CSS3 also provides custom animation functions.

(1) name: The keyframe name that needs to be bound to the selector.

(2) duration: The time required to complete the animation, in seconds or milliseconds.

(3) timing-function: same as transition-linear.

(4) delay: sets the delay before the animation starts.

(5) iteration-count: sets the number of times the animation is executed. Infinite means an infinite loop.

(6) direction: whether to poll the animation in reverse. normal, the default value, the animation should play normally; alternate, the animation should play in reverse order.

<h5 class="title">animate custom animation</h5>
<div class="base base3"></div>

.base3 {
          border-radius: 50%;
          transform:none;
          position: relative;
          width: 100px;
          height: 100px;
          background: linear-gradient(
                  35 degrees,
                  #ccffff,
                  #ffcccc
          );
          &:hover {
              animation-name: bounce;
              animation-duration: 3s;
              animation-iteration-count: infinite;
          }
      }
      @keyframes bounce{
          0% {
              top: 0px;
          }
          50% {
              top: 249px;
              width: 130px;
              height: 70px;
          }
          100% {
              top: 0px;
          }
      }

Operation effect:

As you can see, custom animation can achieve more flexible animation effects, including all the functions of the first and second animations, and the properties are more comprehensive.

Online Production

The above code can be experienced online: Address

Source code address

The above are the details of the three ways to implement animation with CSS3. For more information about implementing animation with CSS3, please pay attention to other related articles on 123WORDPRESS.COM!