You may not know CSS3 Animation

I’m going to be doing some computer vision stuff for girls later, so I’ll look into animation. There are three ways to create animations on the front end: timer, requestAnimationFrame, and CSS3 Animation. The occurrence of requestAnimationFrame basically kills the timer. Although Animation is currently unable to deal with animations that require advanced mathematical operations, such as quadratic slowing and exponential decay sinusoidal slowing (it seems that CSS3 should support trigonometric functions), it can still produce excellent Animation effects in most cases. Here is a summary of the properties of Animation.

Properties in

Currently, animation has the following 9 properties, the first of which is a short form of the following properties.

animation-name

This property is used to specify the name of the @KeyFrames animation. Defining keyframes requires the @Keyframes rule. Style block statements can use from… The to structure can also be defined using percentages.

As shown in the following code, the element is enlarged by 1.1 times at the beginning of the animation, reduced by 0.8 times at the middle of the animation, and enlarged by 1.1 times at the end of the animation. With infinite and Bezier curves, we can simulate a good heartbeat animation.

.heart {
  animation: heartbeat cubic-bezier(0.2, 0.73, 0.71, 0.44) infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1.1); 50%} {transform: scale(0.8); 100%} {transform: scale(1.1); }}Copy the code

animation-duration

This property defines the length of an animation cycle.

• The default value is 0s, indicating no animation

• The unit is seconds or milliseconds. The value is invalid if there is no unit

animation-timing-function

This property is used to define the ‘rhythm’ of the animation, which defaults to ease.

The first five should be very common in Animation and Transition, and you can view the specific function images directly in Chrome Dev (these are the special forms of Bezier curves).

Step-start, step-end, and step-middle represent stepping animations.

Step-start will ignore the first frame of the corresponding @keyframs rule, while step-end will ignore the last frame, and step-middle will step from the first frame to the last frame in a period.

Look at the example below. When step-start is used, the initial state of the element is 1.2 times (corresponding to 25%), and steps 25% -> 50% -> 75% -> 100% in one cycle

When step-end is used, the initial state of the element is 1.1 times (corresponding to 0%), and 0% -> 25% -> 50% -> 75% is stepped in one cycle

When step-middle is used, the initial state of the element is the initial state of the element, and steps 0% -> 25% -> 50% -> 75% -> 100% in one cycle

@keyframes someEffect {
  0% {
    transform: scale(1.1); 25%} {transform: scale(1.2); 50%} {transform: scale(1.3); 75%} {transform: scale(1.4); 100%} {transform: scale(1.5); }}Copy the code

There are also three built-in functions for this property, cubic- Bezier (), steps(), and Frames ().

A brief word on Steps (). If you’ve ever used Twitter, you know how cool the likes are, as you can see below. This effect can be simulated using steps(). The likes module in my blog also has this effect, but with box-shadow. You can see the source code Like Component

First you need to download the following picture, you can see it is an unliked state -> generated fireworks -> fireworks disappeared -> like state Sprite picture.

During initialization, we positioned the initial background to the first gray icon in the figure above by background-position: left and background-size: 2900%.

Next we create @KeyFrames to walk the above image from left to right in one animation cycle.

Instead of moving smoothly, each frame “jumps” to the next icon. We use the steps() function because there are 29 small ICONS, of which the default is the first, so we pass the parameter 28.

When clicking on the background image, add IS_Animating to the Heart element to achieve a thumbs-up display effect.

<div class="heart"></div>
Copy the code

.heart {
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image: url('heart-locus.png');
  background-position: left;
  background-repeat: no-repeat;
  background-size: 2900%;
}

.is_animating {
  animation-name: heart-burst;
  animation-duration: 800ms;
  animation-timing-function: steps(28);
  animation-iteration-count: 1;
}

@keyframes heart-burst {
  from {
    background-position: left;
  }
  to {
    background-position: right; }}Copy the code

const heartDOM = document.querySelector('.heart');

heartDOM.addEventListener('click'.function() {
  this.classList.toggle('is_animating');
});

heartDOM.addEventListener('animationend'.function() {
  this.classList.toggle('is_animating');
});
Copy the code

animation-delay

This property is used to delay animation execution. The default value is 0s. Some interesting things happen when the property value is negative, so let’s go straight to the MDN definition.

Defining a negative value causes the animation to begin immediately. But the animation will start somewhere in its animation sequence. For example, if the value is set to -1s, the animation starts immediately at the first second of its animation sequence. If a negative value is specified for animation delay, but the starting value is hidden, the starting value is obtained from the moment the animation is applied to the element.

Let’s look at this example:

.cube {
  margin-bottom: 10px;
  width: 100px;
  height: 100px;
  background: #ccc;
  animation: colorChange 10s linear;
}

.has-delay {
  animation-delay: 2s;
}

.has-ng-delay {
  animation-delay: -2s;
}

@keyframes colorChange {
  20% {
    background-color: #f8e81c; 40%} {background-color: #d0011b; 60%} {background-color: #7ed321; 80%} {background-color: #509ce3; 100%} {background-color: #ccc; }}Copy the code

The HTML structure is as follows:

<div class="cube"></div>
<div class="cube has-ng-delay"></div>
<div class="cube has-delay"></div>
Copy the code

In this example, we set the total length of the cube animation to 10s and the initial color to grey. The difference is that the first cube executes normally, the second cube executes “delayed” -2s, and the third cube executes delayed 2s.

As you can see from the figure below, the second cube, although negative, is executed from the beginning of the animation, except that it starts on frame 2.

This is because the animation defined in @keyframes requires the length of time to execute animation-time. When animation-delay is positive, the animation will be delayed. Animation-time has not been calculated yet, so the positive delay will not be counted in animation-time. Therefore, the animation we see starts from the first frame. When animation-delay is negative, it means that the animation starts ahead of time and animation-time has already started calculation. The negative delay is counted into animation-time, so the animation we see starts from a certain frame.

So we can try to write a loading component. The source code is posted below.

.loader-container {
  width: 210px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.cube {
  width: 100px;
  height: 100px;
  background: #ccc;
  animation: colorChange 5s linear infinite;
}

.delay-neg-1 {
  animation-delay: -1s;
}

.delay-neg-2 {
  animation-delay: -2s;
}

.delay-neg-3 {
  animation-delay: -3s;
}

.delay-neg-4 {
  animation-delay: -4s;
}
Copy the code

Here is the HTML

<div class="loading-container">
  <div class="cube delay-neg-1"></div>
  <div class="cube delay-neg-2"></div>
  <div class="cube delay-neg-3"></div>
  <div class="cube delay-neg-4"></div>
</div>
Copy the code

animation-iteration-count

This property defines the number of times the animation is looping. The default value is 1

• You can’t think of it as negative

• “Infinite” means an infinite loop

• It can be a decimal, such as 0.5, which means the animation is half finished

animation-direction

This property indicates whether the animation is played in reverse and has four values:

• Normal: Executes from @keyframes 0% to 100% each time, and returns to 0% immediately after the end of a cycle

• Alternate: Assume animation-restage-count: infinite, execute from @keyframes 0% to 100%, then return to 0% from 100%, and repeat

• Reverse: executes from @keyframes 100% to 0% each time, and immediately returns to 100% at the end of a cycle

• Alternate -reverse: assuming animation-rorod-count: infinite, execute from @keyframes 100% to 0%, then return from 0% to 100%, and repeat

animation-fill-mode

Used to set out-of-animation properties, that is, what the state of an element should be before or after an animation cycle begins. This property has four property values, namely None, forwards, backwards, and BOTH.

• None is the default value, indicating that the animation is restored to its original state after it has finished playing.

• Forwards indicates that after animation is finished, the style of the last frame in @keyFrames is kept.

• Backwards means that before animation starts, the style of the elements will be set to the first frame of the animation

• Both is forwards and forwards at the same time. That is, before the animation starts, the element style will be set to the style of the first frame of the animation; In the animation harness state, the element style is set to the style of the last frame of the animation.

animation-play-state

This property is used to pause and start an animation. It has two properties: RUNNING and pause. When pause is set to pause, the animation will immediately stop at its current position.

animation

Finally, animation property is the short form of the above property. Animation property does not include animation-play-state at present. If it is used, it needs to be written separately, and the syntax is as follows.

animation: name duration timing-function delay iteration-count direction fill-mode;
Copy the code

Many animation

Above we saw that each attribute can have multiple attribute values separated by commas, essentially adding multiple animations to an element.

reference

CSS3 animation practice

Introduction to CSS Animation

Review animation-delay negative values and positive delay pits on iOS

Front-end Talkking CSS series – step by step to introduce you to animation effects

The steps feature in CSS3 animation property is described in detail

Details of animation-fill-mode that you don’t know