CSS3 sample code to achieve element arc motion

How to use CSS to control the arc movement of elements

We all know that CSS3's new attribute transfrom transition effect can achieve element displacement, rotation, and scaling. Combined with the animation attribute, you can achieve the animation effect of the element. But how to use CSS to achieve arc movement of elements:

As shown in the animation above, the ball moves in an arc. Analyze the movement:

If we split the movement of the ball into two movements, the X-axis and the Y-axis, the ball on the X-axis moves at a speed of (slow-fast);
The ball moves at a speed of (fast-slow) along the Y axis.
Combine the movement of two axes to achieve an arc effect

Cubic Bezier function

There is an animation-timing-function property in the animation property, which is the speed function of the animation. This property uses a mathematical function called the Cubic Bezier function to generate the speed curve.

cubic-bezier (x1, y1, x2, y2): (For the specific meaning of cubic Bezier function, please refer to relevant materials):

You can use this website portal to adjust the curve value in real time. The animation-timing-function attribute already provides several packaged speed functions: ease, linear, ease-in, ease-out, and ease-in-out, which we commonly use.

Effect realization

The first thing we can think of is to separate the displacement animation of the X-axis and Y-axis. However, an element's animation can only execute one animation (the last one declared) at a time. So we can think from another perspective and use two parent-child elements. Add X-axis displacement animation to the parent element and Y-axis displacement animation to the child element. The specific code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element arc motion</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            border: 2px solid #ff8800;
        }
        span{
            display: block;
            width: 40px;
            height: 40px;
            border: 1px solid #222;
            animation: center1 2s ease-in forwards;

        }
        span:after{
            content: '';
            display: block;
            width: 40px;
            height: 40px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            background: greenyellow;
            animation: center2 2s ease-out forwards;
        }
        @keyframes center1 {
            to{transform: translateX(360px)}
        }
        @keyframes center2 {
            to{transform: translateY(360px)}
        }
    </style>
</head>
<body>
<div class="box">
    <span></span>
</div>
</body>
</html>

At this time, I used the element's pseudo-class after to replace the child element, and the effect is the same. Giving span a colored border allows you to observe the movement trajectories of the two elements for easy observation. The animation effect is as follows:

At this time, it is still relatively obvious that the green ball is moving in an arc.

Extensions:

If you feel that the arc is not big enough or obvious enough at this time, we can adjust the value of the Cubic Bezier function ourselves. According to the website portal.

Select the ease-in curve effect. Now we change the values of x1 and y1 (pull the red point to the right). Then copy the cubic-bezier() value at this point. Replace the original span's animation ease-in position with this value.
Select the ease-out curve effect. Now we change the values of x2 and y2 (pull the blue point to the right). Then copy the cubic-bezier() value at this point. Replace the original span pseudo-class after animation ease-out position with this value.

The CSS code at this time is as follows:

span{
            display: block;
            width: 40px;
            height: 40px;
            border: 1px solid #222;
            animation: center1 2s cubic-bezier(.66,.01,1,1) forwards;

        }
        span:after{
            content: '';
            display: block;
            width: 40px;
            height: 40px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            background: greenyellow;
            animation: center2 2s cubic-bezier(0,0,.36,1) forwards;
        }

The arc of the animation effect at this time is even more obvious:

This concludes this article about sample code for implementing element arc motion with CSS3. For more relevant content on CSS3 element arc motion, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Learning about UDP in Linux

>>: Beginner's guide to building a website ⑦: It's so easy to make a beautiful website

Detailed explanation of two ways of Linux service management: service and systemctl

CSS3 sample code to achieve element arc motion

Detailed explanation of two ways of Linux service management: service and systemctl

Summary of methods to clear cache in Linux system

My personal summary of mysql 5.7 database installation steps

MySQL quickly inserts 100 million test data

centos 7 modify sshd | prohibit root login and sshd port script definition

Detailed tutorial for installing nginx on centos8 (picture and text)

Use vue3 to implement a human-cat communication applet

Implementation of k8s deployment of docker container

A comparison between the href attribute and onclick event of the a tag

Vue implements zip file download

Recommend

Basic usage of exists, in and any in MySQL

JavaScript determines whether the browser is IE

How to set the number of mysql connections (Too many connections)

0.1 seconds worth! A brief discussion on the problem of speeding up the front-end web pages

VMware installation of Ubuntu 20.04 operating system tutorial diagram

CSS scroll-snap scroll event stop and element position detection implementation

Detailed steps for installing and debugging MySQL database on CentOS7 [Example]

How to add Nginx proxy configuration to allow only internal IP access

Sample code for displaying reminder dots in the upper left or upper right corner using CSS3

Detailed steps for deepin20 to install NVIDIA closed-source drivers

Graphical explanation of the underlying principle of JavaScript scope chain

How to install and configure ftp server in CentOS8.0

Summary of learning HTML tags and basic elements

How to install SVN server under Linux

jQuery plugin to implement floating menu