How to make the animation properties in CSS3 look smoother?

ps: First of all, because of work reasons, I haven't updated my blog for a long time. After dealing with some things, I can sit down and reorganize my blog.

Today, I want to talk about a new property in CSS3, animation, which can be considered as a review. I will share how I usually use it and some tips. If you want to learn more basic content, you can click on the link: https://www.runoob.com/css3/css3-animations.html. There are many similar tutorials online.

This article does not go into detail about the basic properties of animations, but rather expands on a topic: how to make the animation properties in CSS3 look smoother?

Of course, before discussing this, let's briefly introduce the basic properties of animation.

animation property#

The animation property has the following values:

@keyframes | The animation itself (the most important)
animation-name | The name of the animation
animation-duration | The duration of the animation
animation-fill-mode | When the property is set to "forwards", the animation stays on the last frame

Animations can be used for some official website effects or adaptive layouts.

How to write a basic animation#

An animation is a process of transitioning from one state to another, such as a movement from left to right.

First, you need to understand the specific functions of each property. Let's take an example of transitioning from white to black. First, write an animation process using @keyframes.

@keyframes leftright {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

This code means that there is an animation named leftright, which moves the container from left to right by 100px.

Then, let's further complete this animation.

<!DOCTYPE html>
<html>
<head>
    <title>Animation</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background: #000;
            animation-name: leftright;
            animation-duration: 1s;
        }

        @keyframes leftright {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

Then, run this page in the browser and you will see a black square moving from left to right by a distance of 100px, completing the animation in 1 second.

But the animation ends abruptly, and the container suddenly returns to its original position. Why is that? It's because we didn't retain the last frame, which requires a property mentioned earlier.

.demo {
    width: 100px;
    height: 100px;
    background: #fff;
    animation-name: leftright; /* Bind the name of the animation to this tag */
    animation-duration: 1s;     /* Set a duration for the animation */
    animation-fill-mode: forwards; /* The animation stays on the last frame */
}

Run it again, and you will see that the animation stops at the end.

Adding inertia to the animation#

If we observe this animation carefully, we will find that it is completed quickly without any delay. However, I noticed a problem: the whole process is not smooth and flexible, it is rigid, and there is no smooth transition from left to right.

Let's analyze it. Because it lacks a common animation in daily life, which is inertia. This property does not exist directly and cannot be set directly. It can only be adjusted through the properties of the animation itself. Let's continue to look at this code.

@keyframes leftright {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

0% represents the start, and 100% represents the end. They refer to a time node, and at this time node, the animation should run to the position specified by them.

So we can add a new time node, 50%, where we let the square move to the position of 120px when half of the time has passed, and then move back.

Here is the complete code. You can copy it to your local environment and run it to see the effect.

<!DOCTYPE html>
<html>
<head>
    <title>Animation</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background: #000;
            animation-name: leftright;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

        @keyframes leftright {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(120px);
            }
            100% {
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

After modifying it, run it in the browser to see the effect.

Isn't it much smoother now? It has a sense of inertia. This is crucial when encountering the need to write animations in work. How to enhance the user experience is a skill.

Although these are some basic things, I think that improving the user experience will increase the return rate of the website. For example, when shopping on a certain online shopping website, if the whole page looks comfortable and the special effects are smooth, it will increase the desire to shop. Although this statement may seem superficial, it does have some psychological effects.

Mastering how to use animation effects well is a skill. It is not that simple to play with CSS and create various effects.