In the past, flash, javascript and Gif were used to achieve interactive animation effects on the WEB. In recent years, with the elimination of Flash and the enhancement of javascript and CSS functions, the interaction of modern WEB applications is increasingly rich. To summarize the basis of CSS interactive animation implementation, the key knowledge point is keyframes, the code example effect involved in the article can be clicked to view the animation effect.

grammar

Keyframe animation is implemented in a similar way to Flash, by updating the properties of the keyframe between CSS blocks. Define a KeyFrame animation that smoothly tween the horizontal position of the element from -100% to 0% :

@keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0%); }}Copy the code

Each @keyframes statement needs a name, usually the name of the interactive animation effect. The code above specifies the name of the effect that slides into slide-in.

Keyframe animations, like other CSS, are generic and reusable, and can be applied to the animation property of a particular selector:

.slide-in {
    animation: slide-in 1000ms;
}
Copy the code

The code above specifies that the translateX property will be changed in 1000ms and executed immediately.

Multiple property changes can be defined in the same animation declaration, as follows:

.drop-in { animation: drop-in 1000ms; } @keyframes drop-in { from { transform: rotate(-30deg) translateY(-100%); opacity: 0; } to { transform: rotate(0deg) translateY(0%); opacity: 1; }}Copy the code

Animation effects

Animating uses the animation-timing-function property to define the pace at which the CSS animation executes in each animation cycle. This is also known as animating, similar to easing in jquery.

.ease-in-out {
    animation-timing-function: ease-in-out;
}
Copy the code

Cycle animation

By default, a keyFrame animation is run only once, but you can use the animation-rotund-count property to control how many times the animation is executed.

.for-three {
    animation-iteration-count: 3;
}
Copy the code

If it is infinite, set the value to infinite, and then enter the number of times as required.

.spinner { animation: spin 1000ms; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes spin { from { transform: rotate(0turn); } to { transform: rotate(1turn); }}Copy the code

Multi-step animation

In addition to the FROM and to keywords, you can also use percentages to define two or more animation steps:

.fancy-spinner { animation: fancy-spin 2000ms; animation-iteration-count: infinite; } @keyframes fancy-spin { 0% { transform: rotate(0turn) scale(1); } 25% { transform: rotate(1turn) scale(1); Transform: rotate(1turn) scale(0.5); Transform: rotate(0turn) scale(0.5); } 100% { transform: rotate(0turn) scale(1); }}Copy the code

Alternate animations

Suppose you want an element to “breathe”, inflate and deflate. It can be set to a 3-step animation:

.grow-shrink { animation: grow-and-shrink 4000ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes grow-and-shrink { 0% { transform: scale(1); } 50% {transform: scale(0.5); } 100% { transform: scale(1); }}Copy the code

A more elegant way to use the animation above is to use the animation-direction property, which indicates whether the animation is played backwards.

@keyframes grow-and-shrink { 0% { transform: scale(1); } 100% {transform: scale(0.5); } } .grow-shrink { animation: grow-and-shrink 2000ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }Copy the code

The animation defined above defines different values for different properties. Like other CSS properties, you can define only one property value, namely animation.

The animation properties are defined as follows:

animation: grow-and-shrink 2000ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
Copy the code

A more concise way, and the recommended way, unlike the padding is that the order doesn’t matter:

animation: grow-and-shrink 2000ms ease-in-out infinite alternate;
Copy the code

Fill mode

Perhaps the most confusing aspect of KeyFrame animation are the fill modes, which are the biggest obstacle on the road to KeyFrame confidence. For example, if you want an element to fade out, the animation itself works fine, but when it ends, the element reappears for a moment causing flash:

.fade-out { animation: fade-out 1000ms; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; }}Copy the code

The reason elements flash back and become fully visible is because declarations in the FROM and to blocks are only valid while the animation is running.

Once the 1000ms animation is complete, the elements are displayed as CSS declarations, and transparency is opaque by default. So the opacity goes back to opacity after the animation is done.

One way around this is to declare transparency outside of the animation, as follows:

.fade-out-2 {
    animation: fade-out 1000ms;
    opacity: 0;
}
Copy the code

The above solution solved the problem, but it wasn’t the best approach. The best way to do this is to use the property animation-fill-mode to set how the CSS animation applies the style to its target before and after execution.

.fade-out-forwards {
    animation: fade-out 1000ms;
    animation-fill-mode: forwards;
}
Copy the code

The parameters of the animation-fill-mode property are as follows:

None: This is the default. When the animation is not executed, the animation will not apply any style to the target, but instead will display the element using CSS rules that have been assigned to the element; Forwards: The target will retain the values calculated by the last keyframe encountered during execution, which depends on the values of animation-direction and animation-rotund-count; Backwards: Animations will apply the values defined in the first keyframe immediately when applied to the target and retain the values during animation-delay. The first keyframe depends on the animation-direction value; Both: Animations follow the rules of forwards and backwards, extending animation properties in both directions.

Dynamic animation

Keyframe animations implement basic animation effects, which can be used with CSS variables to define more complex effects.

.bounce-box {animation: bounce 300ms alternate infinite Cubic -bezier(0.2, 0.65, 0.6, 1); } @keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(62px); }}Copy the code

CSS animations are generic and reusable, but this animation will always make an element bounce 62px. If different elements can provide different “bounce heights”, this increases animation flexibility.

Using CSS variables, you can do this:

@keyframes bounceY { from { transform: translateY(0px); } to { transform: translateY(var(--bounce-offset)); } } .bounceY-box { float: left; Animation: bounce alternate infinite Cubic - Bezier (0.2, 0.65, 0.6, 1); } .bounceY-box.one { --bounce-offset: 62px; animation-duration: 200ms; } .bounceY-box.two { --bounce-offset: 32px; animation-duration: 300ms; } .bounceY-box.three { --bounce-offset: -40px; animation-duration: 400ms; }Copy the code

conclusion

CSS has changed a lot in recent years, becoming more powerful and making future WEB applications richer.