The world of WEB animation has become a vast jungle of tools and technologies, with libraries like GSAP and Framer Motion and React Spring springing up to help WEB project development add action to the DOM.

However, the most basic and critical part is the transition in CSS. It is the first animation tool that most front-end developers learn, and interactive animation of the WEB is largely done by CSS.

In this article, we will learn more about the transition of CSS animation. The code examples involved in this article can be clicked to see the animation effects.

Basic knowledge of

The main characters needed to create animations are some CSS properties that change. Here is an example of a button that moves while hovering, without animation:

.btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    margin: 15px;
    background-color: #6a5acd;
    place-content: center;
    color: white;
    text-align: center;
}

.btn:hover {
    transform: translateX(40px);
}
Copy the code

This fragment uses the :hover pseudo-class to specify an additional CSS declaration when the mouse hovers over the button, similar to the onMouseEnter event in JavaScript.

To move elements to the right, use transform: translateY(40px). While margin-left is possible, transform: Translate is a better way to do this.

Now I’m going to add the transition property to the button:

.transition {
    transition: transform 250ms;
}
Copy the code

The transition property value can have multiple values, but two are required:

  • The name of the animation property
  • The duration of the animation

If the animation is set for multiple properties, use a comma-separated list as the transition property value:

.btn-2 {
    transition: transform 250ms, opacity 400ms;
}
.btn-2:hover {
    transform: scale(1.2);
    opacity: 0;
}
Copy the code

Transition has a special value: all, which animates any CSS property changes.

Animation effects

When telling an element to transition from one position to another, the browser needs to figure out how each intermediate frame should transition.

For example: If you move an element from left to right for 1 second, a smooth animation should switch at 60 FPS *, which means you need to vacate 60 separate positions between start and end, like a film. If distributed evenly, each light-colored circle represents a frame animation. These are the frames shown to the user as the circle moves from left to right, as follows:

In this animation, a linear timing function is used, meaning that the elements move at a constant speed and the circles in the image move the same amount each frame.

There are several animation effects available in CSS, specified by the transition-timing-function property:

.btn-3 { transition: transform 250ms; transition-timing-function: linear; / /* Transition: transform 250ms Linear; * /}Copy the code

ease-out

A bison rushes in, but it runs out of energy and, in the end, plods along like a sleepy turtle.

From the image effect you can see that the speed of the first few frames is very special block, and it becomes very slow at the end.

ease-in

Eease-in works just the opposite of ease-out, where the washing machine dehydrates and starts to spin slowly and then speeds up quickly.

ease-in-out

Ease-in-out is a combination of the previous two animation effects:

ease

Ease, unlike ease-in-out, is not symmetrical and is characterized by a brief acceleration and a large deceleration.

Ease is the default and is used by default if no animation effect is specified.

Custom curve

If the built-in options provided do not meet your requirements, you can use the cubic Bezier Timing function to customize the easing curve.

.bTN-4 {transition: transform 250ms Cubic bezier(0.1, 0.2, 0.3, 0.4); }Copy the code

You can see from the syntax above that all values are the default values for the cubic- Bezier function, which requires four numbers representing two control points. An online tool called Cubic – Bezier is recommended for defining the corresponding default values.

Once you have debugged a satisfactory animation curve, click “Copy” at the top and paste it into CSS to achieve the corresponding animation effect.

You can also choose from the Easing Functions extension set. The main thing is that there are some effects that CSS doesn’t support very well and you need to choose them accordingly.

The demo

It was mentioned earlier that animations should run at 60 frames per second. However, when calculating, realize that this means the browser only has 16.6 milliseconds to draw each frame, which is really not much time. For reference, blinking takes about 100-300 milliseconds. For the animation rate, you need to set a reasonable value, otherwise the device can’t keep up and the frames will be discarded.

In practice, poor performance usually comes in the form of variable frame rates. Animation performance is a very deep and interesting topic that I won’t cover in detail here, but it’s worth knowing:

  • Some CSS properties are more expensive to animate than others. For example, height-changing animation is a very expensive property because it affects layout, and when an element’s height shrinks, it causes a chain reaction in which all of its siblings need to move up to fill the space.
  • Other attributes such asbackground-colorIt does affect the layout, but it does require a color on each animation frame.
  • transform 和 opacity, is a highly recommended animation effect that has little impact on performance. If the animation is currently adjustedwidth 或 left“, can passtransformTo convert (although not always to the exact same effect)
  • Be sure to test animations on the lowest end devices targeted by the website/app and provide compatible solutions for low end devices, such as removing animations.

Hardware acceleration

Depending on the end user’s browser and operating system, there are minor defects as shown in the following image:

Looking closely at the button letters, notice that they are slightly offset at the beginning and end of the conversion due to the switch between the CPU and GPU of the computer. When animating an element using transform and opacity, browsers sometimes try to optimize this animation. Instead of rasterizing pixels on every frame, it sends everything as a texture to the GPU, and the GPU is very good at doing this kind of texture-based transformation, and as a result, you get very smooth, very high performance animation, which is called hardware acceleration.

Hardware acceleration, also known as GPU acceleration, is an optimization scheme that uses GPU for rendering and reduces CPU operations. Since CSS properties such as transform in the GPU do not trigger redrawing, the performance of web pages can be greatly improved.

Hardware acceleration can be set by adding the following CSS will-change properties:

Will-change gives Web developers a way to inform browsers about changes to elements so that browsers can optimize them before they actually change.

.btn-5 {
    will-change: transform;
}
Copy the code

Will-change allows you to declare to the browser that you are going to animate the selected element, and should be optimized for this case so that the browser will always let the GPU handle the element. No longer need to switch between CPU and GPU, no more stuck into place phenomenon.

Hardware acceleration is triggered by subordinate performance in CSS:

  • transform
  • opacity
  • filter
  • will-change

If there are elements that do not need the above attributes but need to trigger hardware acceleration, you can use a few tricks to induce the browser to turn on hardware acceleration, as follows:

.item { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); /** / transform: rotateZ(360deg); transform: translate3d(0, 0, 0); }Copy the code

Using a hack like translateZ() (or translate3D ()) (sometimes called a NULL transform hack) to get the browser to hardware-accelerate animation or transform behavior, Hardware acceleration is achieved by adding a simple 3D transformation to an element that will not be transformed in 3D space.

conclusion

Using KEYFrames in CSS Interactive Animation Guide KeyFrames, combined with transition in this article, can basically add corresponding improved animations for front-end projects.