How to make the animation properties in CSS3 look smoother?

ps: First, a side note, I haven't updated my blog for a long time due to work reasons. Recently, I've reached a point where I can sit down and reorganize my blog after handling some matters.

Today, I want to talk about a new property in CSS3 called animation, which can also be seen 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 the link: https://www.runoob.com/css3/css3-animations.html. There are quite a few similar tutorials online.

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

Of course, before discussing this, I will 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 at the last frame

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

How to Write a Basic Animation#

An animation is the process of transitioning from one state to another, such as moving 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 by first writing an @keyframes animation process.

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

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

Next, we will 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>

Now let's run this page in the browser and see that a black square moves 100px from left to right, completing in 1 second.

However, the animation ends abruptly, and the container suddenly returns to its original position. Why is that? Because we did not retain the last frame, which requires a property that we discussed at the top.

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

After running it, you can see that the animation stops at the end.

Adding Inertia to the Animation#

If we closely observe this animation, we find that the entire process is very quick and lacks fluidity; it is quite stiff, moving from left to right without any smoothness.

Analyzing this, we notice that it lacks a common animation characteristic from daily life: inertia. This property does not exist directly; it can only be adjusted through the properties of the animation itself. Let's continue with this piece of code.

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

0% represents the start, and 100% represents the end; they refer to specific time points where the animation should reach their designated positions.

Therefore, we can add a new time point, 50%, where we let the square move to 120px at the halfway mark and then return.

Here is the complete code that you can copy to your local machine and run to see for yourself.

<!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 making the changes, check the effect in the browser.

Isn't it much smoother now, giving a sense of inertia? This aspect is crucial when encountering animation requirements in work; how to enhance user experience is a skill.

Although these are basic concepts, I believe that improving the experience will increase the website's return rate. For example, when shopping on a certain e-commerce website, if the entire page looks comfortable and the special effects are smooth, doesn't it increase the desire to shop? Although this may sound superficial, it does have a psychological effect.

Knowing how to effectively use animation effects is an art; playing with CSS is not that simple.