How to animate css3 and play it in a few seconds

This article introduces the relevant knowledge of "how to animate css3 and play it in a few seconds". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In css3, you can use the animation-delay property to animate and play after a few seconds, which sets the delay time of the object animation, that is, the time to wait before the animation starts, in seconds or milliseconds; the syntax "animation-delay: numeric + units;", which can be seconds (s) or milliseconds (ms).

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css3, you can use the animation-delay property to animate and play after a few seconds.

The animation-delay property can arbitrarily retrieve or set the delay time of the object animation, that is, define when the animation starts.

Syntax:

Animation-delay: time

Time: defines the amount of time to wait before the animation starts, in seconds or milliseconds (the value can be seconds or milliseconds ms); the default value is 0.

Tip: negative values are allowed,-2s causes the animation to start immediately, but skip 2 seconds to enter the animation.

Example: delay 5 seconds to start animation

Div {width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; animation-delay: 5s / * Safari and Chrome*/-webkit-animation: mymove 5s infinite;-webkit-animation-delay: 5s } @ keyframes mymove {from {left: 0px;} to {left: 200px } @-webkit-keyframes mymove / * Safari and Chrome*/ {from {left: 0px } to {left: 200px;}}

This is the end of "how to animate css3 in a few seconds". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!