css animation animation

css animation syntax

To create an animation sequence, you need to use animationthe property or its sub-properties. This property allows you to configure the animation time, duration and other animation details. However, this property cannot configure the actual performance of the animation. The actual performance of the animation is implemented by rules @keyframes.

Attributes	describe
`animation-name`	Specify keyframe names described by @keyframes
`animation-duration`	Set the duration of an animation cycle
`animation-delay`	Set the delay, which is the time from when the element is loaded to when the animation sequence starts.
`animation-direction`	Set whether the animation runs in reverse after each run or returns to the starting position and runs again.
`animation-iteration-count`	Set the number of animation repetitions. You can specify infinite to repeat the animation infinitely.
`animation-play-state`	Allows pausing and resuming animations
`animation-timing-function`	Set the animation speed, that is, by establishing an acceleration curve, set how the animation changes between key frames
`animation-fill-mode`	Specifies the style of the element when the animation is not playing (before the start, after the end, or both)

Keyframes rule settings

Use percentage

@keyframes test {
    
    
  0% {
    
    
    opacity: 1;
  }
  100% {
    
    
    opacity: 0;
  }
}

Use from and to

@keyframes test {
    
    
  from {
    
    
    opacity: 1;
  }
  to {
    
    
    opacity: 0;
  }
}

Of course, when our keyframes are more than 2 frames, it is more recommended to use percentage definition.
In addition, when the starting frame of the animation is equal to the value assigned in the CSS rule and is not set animation-fill-mode, the 0% and from frames can be deleted.

animation-delay detailed explanation

animation-delayWhat’s more interesting is that it can set the animation delay, which is the time from when the element is loaded to when the animation sequence starts.

animationAttribute, which can also be abbreviated as animation: test 2s 1s, the first time value represents the duration, and the second time value represents the delay time

div {
    
    
  width: 100px;
  height: 100px;
  background: #000;
  animation-name: test;
  animation-duration: 2s;
}

div:nth-child(2) {
    
    
  animation-delay: 1s;
}

@keyframes test {
    
    
  0% {
    
    
    transform: translate(0);
  }
  100% {
    
    
    transform: translate(200px);
  }
}

animation-delay can be negative

animation-delayThe most interesting trick about this is that it can be a negative number. In other words, although the attribute name is the animation delay time, after using a negative number, the animation can proceed in advance

Here is a three-ball rotating dome:

.div:nth-child(1) {
    
    
  animation: test 3s infinite linear;
}
.div:nth-child(2) {
    
    
  animation: test 3s infinite -1s linear;
}
.div:nth-child(3) {
    
    
  animation: test 3s infinite -2s linear;
}

animation-duration and animation-delay build random effects

For the same animation, we use random within a certain range animation-durationand random within a certain range animation-delayto effectively construct a more random animation effect and make the animation more natural.

The animation-direction property accepts the following values:
- normal - the animation plays normally (forward). default value
- reverse - the animation plays in the opposite direction (backwards)
- alternate - the animation plays forward first, then backward
- alternate-reverse - the animation plays backward, then forward
We use the loop and random() function of sass to make animation-durationit random within the range of 2-4 seconds and animation-delayrandom within the range of 1-2 seconds. In this way, we can get a very natural and different rising animation effect, which will basically not appear. Repeating images simulate random effects very well

@for $i from 1 to 11 {
    
    
  li:nth-child(#{
    
    $i}) {
    
    
    animation-duration: #{
    
    random(2000) / 1000 + 2}s;
    animation-delay: #{
    
    random(1000) / 1000 + 1}s;
  }
}

animation-timing-function easing function

The easing function is very important in animation. It defines the rhythm of animation execution in each animation cycle.

Easing is mainly divided into two categories:
- cubic-bezier-timing-function cubic Bezier curve easing function
- step-timing-function step easing function
The animation-timing-function property accepts the following values:
- ease - the animation starts at a slow speed, then speeds up, then slows down before ending (default)
- linear - constant speed, the speed of the animation is the same from beginning to end
- ease-in - the animation starts at a slow speed
- ease-out - the animation ends at a slow speed
- ease-in-out - animation starts and ends at a slow speed
- cubic-bezier(n,n,n,n) - allows you to define your own values in the cubic Bezier function
Here is a very useful website – https://cubic-bezier.com/ for creating and debugging different Bezier curve parameters.

Several manifestations of step easing functions

{
    
    
    animation-timing-function: step-start;
    animation-timing-function: step-end;

    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}

In CSS, the most commonly used step easing function is to use it to achieve frame-by-frame animation. We can use animation-timing-function: steps(6)it to connect it together with a CSS animation.

.box {
    
    
  width: 256px;
  height: 256px;
  background: url('@/assets/img/test.jpg');
  animation: test 0.6s steps(6, end) infinite;
}
@keyframes test {
    
    
  0% {
    
    
    background-position: 0 0;
  }
  100% {
    
    
    background-position: -1536px 0;
  }
}

First of all, you need to know that exactly 256 x 6 = 1536, so the above picture can actually be divided into exactly 6 segments:
- We set a div with a size of 256px, and assigned this div a animation: sprite .6s steps(6) infinite animation
- Among them, steps(6) means to divide the set @keyframesanimation into 6 times (6 frames) for execution, and the overall animation time is 0.6s, so the pause time of each frame is 0.1s.
- The animation effect is from background-position: 0 0 to background-position: -1536px 0. Since the above CSS code is not set background-repeat, in fact background-position: 0 0 is equivalent to background-position: -1536px 0, that is, the picture advances one round during the entire animation process, but every time One frame stopped at a specific place, a total of 6 frames
In fact, during the animation process, background-positionthe values of are actually only background-position: 0 0, background-position: -256px 0, background-position: -512px 0 and so on until background-position: -1536px 0. Due to repeatthe characteristics of the background, it actually just returns to the original point and starts again. A new round of the same animation

Comparison between tween animation and frame-by-frame animation interpretation of the same animation effect

The above-mentioned cubic Bezier curve easing and step easing are actually the corresponding tween animation and frame-by-frame animation.
stepsTurn tweened animation into frame-by-frame animation through settings

.box {
    
    
  animation: test 2s steps(10) infinite;
}
@keyframes test {
    
    
  0% {
    
    
    transform: rotate(0);
  }
  100% {
    
    
    transform: rotate(360deg);
  }
}

animation-play-state controls the state of animation

animation-play-state, as the name suggests, it can control the state of the animation - running or pausing, similar to the start and pause of the video player, and is one of the limited means of controlling the animation state in CSS animation.

It has only two values (the default is running): animation-play-state: paused | running;
It is also very simple to use. Look at the following example. We pause the animation when hovering the button:

.box {
    
    
  width: 100px;
  height: 100px;
  background: deeppink;
  animation: test 2s linear infinite alternate;
}

@keyframes test {
    
    
  100% {
    
    
    transform: translate(100px, 0);
  }
}

.stop:hover ~ .box {
    
    
  animation-play-state: paused;
}

animation-fill-mode controls the state of elements at each stage

animation-fill-modeThe property accepts the following values:
- none- default value. The animation does not apply any styles to the element before or after it is executed
- forwards- The style of the element before the animation starts is the style set by the CSS rule, while the style after the animation ends is calculated by the last keyframe encountered during execution (that is, stopped at the last frame)
- backwards- The style of the element before the animation starts (including the untriggered animation stage and the animation-delay period) is the first frame when the animation is running, and the style after the animation ends is restored to the style set by the CSS rules
- both- Integrated animation-fill-mode: backwards and animation-fill-mode: forwards settings. The style before the animation starts is the first frame when the animation is running, and it stops at the last frame after the animation ends.

animation-iteration-count/animation-direction animation cycle number and direction

animation-iteration-countControls the number of times the animation runs, which can be a number or infinite, note, the number can be a decimal
animation-directionControl the direction of animation, forward, reverse, forward alternation and reverse alternation
When describing above animation-fill-mode, I used the first frame when the animation is running instead of the @keyframesfirst frame defined in because the actual status of the first and last frames of the animation will also be affected by the animation running direction animation-directionandanimation-iteration-count
In CSS animation, animation-iteration-countand animation-directionjointly determine the status of the first and last frames when the animation is running.
- The first frame of the animation run is animation-directiondetermined by
- The last frame of the animation run is determined by animation-iteration-countandanimation-direction

.box {
    
    
  animation: test 4s linear;
  animation-play-state: paused;
  transform: translate(0, 0);
}
@keyframes test {
    
    
  0% {
    
    
    transform: translate(100px, 0);
  }
  100% {
    
    
    transform: translate(300px, 0);
  }
}

The element does not have a displacement transform: translate(0, 0), and in the animation, the translateX of the first keyframe and the last key are 100px and 300px respectively. With different animation-direction, the initial state is as follows
- Without setting animation – the initial state is transform: translate(0,0)
- When animation-fill-mode: backwards; animation-direction: normal; is set, the initial state is transform: translate(100px,0) in @keyframes
- When animation-fill-mode: backwards; animation-direction: reverse; is set, the initial state is transform: translate(300px,0) in @keyframes

Divide and conquer animation

Here we implement a div block falling animation, which changes the transparency while falling:

div {
    
    
  width: 100px;
  height: 100px;
  background: #000;
  animation: combine 2s;
}
@keyframes combine {
    
    
  100% {
    
    
    transform: translate(0, 150px);
    opacity: 0;
  }
}

/* or */

div {
    
    
  animation: falldown 2s, fadeIn 2s;
}

@keyframes falldown {
    
    
  100% {
    
    
    transform: translate(0, 150px);
  }
}
@keyframes fadeIn {
    
    
  100% {
    
    
    opacity: 0;
  }
}

In CSS animation rules, animation can receive multiple animations. The purpose of this is not only for reuse, but also for divide and conquer. We can have more precise control over the animation at each attribute level.