Shulou(Shulou.com)06/02 Report--

This article mainly introduces the relevant knowledge of "how to set up and execute css3 animation". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to set up and execute css3 animation once" can help you solve the problem.

In css3, you can use the animation-iteration-count property to animate once, which defines the number of times the animation is played; when the value of the animation-iteration-count property is set to the number "1", you can set the animation to play only once.

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

In css3, you can use the animation-iteration-count property to animate an execution.

The animation-iteration-count property defines the number of times the animation is played and how many times the animation should be played.

Syntax:

Animation-iteration-count: the value; value describes n as a number that defines how many times the animation should be played infinite specifies that the animation should be played indefinitely (forever)

Example:

Animate and play only once.

Div {width: 100px; height: 100px; background: red; position: relative; animation: mymove 3s; animation-iteration-count: 1 / * Safari and Chrome * /-webkit-animation: mymove 3s;-webkit-animation-iteration-count: 1 } @ keyframes mymove {from {top: 0px;} to {top: 200px @-webkit-keyframes mymove / * Safari and Chrome * / {from {top: 0px } to {top: 200px;}}

Modify it and animate it for 3 times.

Div {width: 100px; height: 100px; background: red; position: relative; animation: mymove 3s; animation-iteration-count: 3; / * Safari and Chrome * /-webkit-animation: mymove 3s;-webkit-animation-iteration-count: 3;}

This is the end of the content about "how to set up and execute css3 Animation once". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.