masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Arah animasi CSS3

Penjelasan terperinci tentang atribut animasi-arah CSS3:
Atribut ini digunakan untuk menetapkan sama ada animasi animasi boleh bergerak secara terbalik.
Untuk maklumat lanjut tentang atribut animasi, sila rujuk penjelasan terperinci tentang penggunaan atribut animasi dalam CSS3.
Struktur tatabahasa:

animation-direction：normal | alternate [ , normal | alternate ]*

Analisis parameter:
1.normal: Animasi berjalan dalam arah biasa.
2.selang seli: Selang seli antara arah biasa dan arah songsang.
Nota Khas:
Jika berbilang nilai atribut disediakan, pisahkan dengan koma.
Ciri skrip yang sepadan ialah animationDirection.
Contoh kod:

<!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 5s infinite;
  -webkit-animation:theanimation 5s infinite;
  -moz-animation:theanimation 5s infinite;
  -o-animation:theanimation 5s infinite;
  -ms-animation:theanimation 5s infinite;
   
  animation-direction:alternate;
  -webkit-animation-direction:alternate;
  -moz-animation-direction:alternate;
  -o-animation-direction:alternate;
  -ms-animation-direction:alternate;
}
@keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-webkit-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-moz-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-o-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-ms-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Kod di atas boleh menetapkan animasi untuk bergerak secara berselang-seli dalam arah biasa dan arah songsang. 

<!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:firstanimation 5s infinite,secondanimation 2s infinite; 
  -webkit-animation:firstanimation 5s infinite,secondanimation 2s infinite; 
  -moz-animation:firstanimation 5s infinite,secondanimation 2s infinite; 
  -o-animation:firstanimation 5s infinite,secondanimation 2s infinite; 
  -ms-animation:firstanimation 5s infinite,secondanimation 2s infinite; 
   
  animation-direction:alternate,normal;
  -webkit-animation-direction:alternate,normal;
  -moz-animation-direction:alternate,normal;
  -o-animation-direction:alternate,normal;
  -ms-animation-direction:alternate,normal;
}
@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 boleh menyediakan dua animasi masing-masing Satu boleh dijalankan secara bergilir-gilir dalam dua arah, dan satu lagi hanya boleh berjalan dalam arah biasa.


Meneruskan pembelajaran
||
<!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:firstanimation 5s infinite,secondanimation 2s infinite; -webkit-animation:firstanimation 5s infinite,secondanimation 2s infinite; -moz-animation:firstanimation 5s infinite,secondanimation 2s infinite; -o-animation:firstanimation 5s infinite,secondanimation 2s infinite; -ms-animation:firstanimation 5s infinite,secondanimation 2s infinite; animation-direction:alternate,normal; -webkit-animation-direction:alternate,normal; -moz-animation-direction:alternate,normal; -o-animation-direction:alternate,normal; -ms-animation-direction:alternate,normal; } @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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
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

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492493 permainan