Masa gelung animasi CSS3
Penjelasan terperinci tentang atribut animation-iteration-count CSS3:
Atribut ini digunakan untuk menetapkan tempoh peralihan animasi animasi.
Untuk maklumat lanjut tentang atribut animasi, sila rujuk penjelasan terperinci tentang penggunaan atribut animasi dalam CSS3.
Struktur tatabahasa:
animation-iteration-count:infinite | <number> [ , infinite | <number> ]*
Analisis parameter:
1.infinite: Menentukan bahawa animasi boleh gelung tanpa had.
2.number: Tentukan bilangan gelung animasi dengan jelas.
Nota Khas:
Jika berbilang nilai atribut disediakan, pisahkan dengan koma.
Ciri skrip yang sepadan ialah animationIterationCount.
Contoh kod:
Contoh 1:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> div{ width:100px; height:100px; background:red; position:relative; animation:theanimation infinite alternate; -webkit-animation:theanimation alternate ; -moz-animation:theanimation alternate ; -o-animation:theanimation alternate ; -ms-animation:theanimation alternate ; -webkit-animation-duration:8s; -moz-animation-duration:8s; -o-animation-duration:8s; -ms-animation-duration:8s; animation-duration:8s; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; animation-iteration-count:infinite; } @keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-moz-keyframes theanimation{ 0% {top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-webkit-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-o-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } </style> </head> <body> <div></div> </body> </html>
Animasi yang ditetapkan oleh kod di atas boleh gelung tanpa had.
Contoh 2:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> div{ width:100px; height:100px; background:red; position:relative; animation:firstanimation 5s alternate,secondanimation 2s alternate; -webkit-animation:firstanimation 5s alternate,secondanimation 2s alternate; -moz-animation:firstanimation 5s alternate,secondanimation 2s alternate; -o-animation:firstanimation 5s alternate,secondanimation 2s alternate; -ms-animation:firstanimation 5s alternate,secondanimation 2s alternate; -webkit-animation-iteration-count:infinite,2; -moz-animation-iteration-count:infinite,2; -o-animation-iteration-count:infinite,2; -ms-animation-iteration-count:infinite,2; animation-iteration-count:infinite,2; } @keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-webkit-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-moz-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-o-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @-ms-keyframes firstanimation{ 0% {left:0px;} 100% {left:200px;} } @keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-webkit-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-moz-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-o-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } @-ms-keyframes secondanimation{ 0% {top:0px;} 100% {top:200px;} } </style> </head> <body> <div></div> </body> </html>
Kod di atas menggunakan atribut animation-iteration-count untuk menentukan dua parameter, iaitu bilangan larian bagi dua animasi.