css3 animation ball rolling js control animation pause

CSS3 can create animations, which can replace many web page animated images, Flash animations, and JavaScript effects.

CSS3 @keyframes rule

To create CSS3 animations, you need to understand the @keyframes rule.

The @keyframes rule creates animations.

@keyframes specifies a CSS style within the rule and the animation will gradually change from the current style to the new style.

@keyframes myfirst /* myfirst is the animation name*/
{
    from {background: red;}
    to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

CSS3 Animation

When creating an animation in @keyframes , bind it to a selector, otherwise the animation will have no effect.

Specify at least these two CSS3 animation properties to bind to a selector:

• Specifies the name of the animation
• Specifies the duration of the animation

Example: Bundle the "myfirst" animation to a div element with a duration of 5 seconds.

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Note: You must define the name of the animation and the duration of the animation. If you omit the duration, the animation will not run, since the default value is 0.

What is CSS3 animation?

Animation is the effect of gradually changing an element from one style to another.

You can change as many styles as you want, as many times as you want.

Please specify the time when the change should occur as a percentage, or use the keywords "from" and "to", which are equivalent to 0% and 100%.

0% is the start of the animation and 100% is the end of the animation.

For best browser support, you should always define 0% and 100% selectors.

Example: Change the background color when the animation is at 25% and 50%, and then again when the animation is 100% complete:

@keyframes myfirst
{
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
}

Next is a little exercise I wrote. Through CSS animation, the ball rolls infinitely on the grass, and two buttons are added to control the running and pausing of the animation (the red ball on the top is the sun I drew 2333)

Summarize

The above is the CSS3 animation ball rolling JS control animation pause introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!