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://ipnx.cn/" />
<title>php中文網(wǎng)</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://ipnx.cn/" />
<title>php中文網(wǎng)</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.
