How to use CSS to implement an example of a circular motion ball

We often see some animated effects on the page, many of which can be implemented by CSS only.

Here we use the animation attribute of the CSS3.

The animation property is a shorthand property for setting six animation properties:
ANIMATION-NAME Specifies the keyframe name to bind to the selector.
Animation-duration specifies the time, in seconds or milliseconds, that the animation will take to complete.
animation-timing-function Specifies the speed curve of the animation.
ANIMATION-DELAY specifies the delay before the animation begins.
ANIMATION-ITERATION-COUNT specifies the number of times the animation should play.
Animation-direction Specifies whether the animation should be rotated in reverse.
Note: Always specify the Animation-duration property, otherwise the duration is 0 and the animation will not play.

Animation:name Duration timing-function delay iteration-count direction;

example: A small ball that makes a circular motion. Below is the relevant code, we can make corresponding changes on this basis.

<! DOCTYPE Html>