masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
cari
logo
  • Log masuk
  • Daftar
Penetapan semula kata laluan berjaya

Ikuti proiects vou berminat dengan andi aet terbaru mengenai mereka

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="//m.sbmmt.com/" />   
<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.

Meneruskan pembelajaran
fail baharu
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <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>
Tetapkan Semula Kod
Operasi automatik
serahkan
logo
Pratonton Clear
Bahagian sebelumnya
bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Percuma Tutorial CSS3 dari kemasukan ke kemahiran
Percuma jQuery dari kemasukan ke kemahiran
Percuma Tutorial HTML5 dari kemasukan kepada kemahiran
Percuma Tutorial praktikal Webpack5 (dari kemasukan kepada kemahiran)
Percuma Tutorial Janji bahagian hadapan web dari kemasukan ke penguasaan
Percuma Manual pembangunan HTML
Percuma Manual teknikal XML
Percuma Manual Tutorial Permulaan SQL
Percuma Bermula dengan Perl
Percuma Dokumen tutorial dalam talian DTD
Percuma Tutorial pengenalan asas Python
Percuma Tutorial asas Servlet
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~
Pelajar yang telah menonton kursus ini juga sedang belajar
496452
Mari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP Pengenalan pantas kepada pembangunan bahagian hadapan web Pembangunan Tianlongbabu praktikal skala besar bagi rangka kerja MVC versi Mini meniru laman web ensiklopedia perkara yang memalukan Bermula dengan Pembangunan Praktikal PHP: Penciptaan PHP Pantas [Forum Perniagaan Kecil] Pengesahan log masuk dan papan mesej klasik Pengumpulan pengetahuan rangkaian komputer Mula Pantas Node.JS Versi Penuh Kursus bahagian hadapan yang paling memahami anda: HTML5/CSS3/ES6/NPM/Vue/...[Asal] Tulis rangka kerja PHP MVC anda sendiri (40 bab secara mendalam/butiran besar/mesti dibaca untuk pemula untuk maju)