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 examples of converting rows to columns and columns to rows in MySQL

CSS3 sample code to achieve element arc motion

Detailed examples of converting rows to columns and columns to rows in MySQL

How to install kibana tokenizer inside docker container

Detailed explanation of replace into example in mysql

Use vue3 to implement a human-cat communication applet

Analysis of CocosCreator's new resource management system

MySQL database master-slave replication and read-write separation

Detailed explanation of how Vue returns values to dynamically generate forms and submit data

CSS delivery address parallelogram line style example code

Centos 7.4 server time synchronization configuration method [based on NTP service]

Detailed explanation of MYSQL stored procedure comments

Recommend

In-depth explanation of currying of JS functions

MySQL installation and configuration method graphic tutorial (CentOS7)

Several magical uses of JS ES6 spread operator

How to shrink the log file in MYSQL SERVER

Detailed explanation of how to use relative paths in HTML to obtain files at all levels of directories

Three ways to implement animation in CSS3

In-depth understanding of HTML relative path (Relative Path) and absolute path (Absolute Path)

Ant designing vue table to achieve a complete example of scalable columns

Summary of several situations in which MySQL indexes fail

About Tomcat combined with Atomikos to implement JTA

JavaScript implements fireworks effects with sound effects

Implementing a web calculator based on JavaScript

Solution to the blank page after vue.js packaged project

Processing ideas for decrypting WeChat applet packages on PC in node.js

Summary of 11 common mistakes made by MySQL call novices