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

This article mainly introduces how css3 animation cycle only once related knowledge, content detailed and easy to understand, simple and fast operation, has a certain reference value, I believe everyone read this article css3 how to achieve animation cycle only once the article will have some harvest, let's take a look at it.

css3 Animation loops only once Set with "animation-iteration-count" attribute, which can specify the number of execution times of animation. When the value of this attribute is 1, you can set animation to loop only once; syntax "element {animation-iteration-count:1;}".

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

Css3 animation loops only once with the animation-iteration-count property set.

The animation-iteration-count property specifies the number of executions of the animation, defining how many times the animation should play.

When this attribute has a value of 1, you can set the animation to loop only once.

Examples:

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 { 0% { top: 0px; } 50% { top: 200px; } 100% { top: 0px; } } @-webkit-keyframes mymove{ /* Safari and Chrome */ 0% { top: 0px; } 50% { top: 200px; } 100% { top: 0px; } }

About "css3 how to realize animation only loop once" the content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of the knowledge of "how to realize animation only once in css3." If you still want to learn more knowledge, please pay attention to the industry information channel.

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.