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

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

Arah animasi CSS3

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]