Harta animasi animasi CSS3
Penjelasan terperinci tentang penggunaan atribut animasi CSS3:
animasi diterjemahkan ke dalam bahasa Cina sebagai "animasi". Sesungguhnya, atribut animasi digunakan untuk mentakrifkan Kesan animasi sesuatu elemen Sudah tentu, ia lebih kasar daripada animasi yang dibuat menggunakan flash atau js, tetapi ia boleh memenuhi keperluan asas animasi kami, jadi anda perlu menguasai atribut ini.
1. Pengetahuan asas:
Sebelum membaca artikel berikut, adalah disyorkan untuk merujuk kepada penjelasan terperinci penggunaan @keyframes dalam CSS3 terlebih dahulu.
Kesan peralihan animasi boleh dicapai menggunakan atribut peralihan, tetapi atribut ini mempunyai kelemahan, iaitu, proses peralihan daripada nilai awal kepada nilai akhir adalah kurang terkawal, yang bermaksud bahawa kesan animasi tidak boleh dikawal dalam lebih banyak lagi. perincian, dan Atribut animasi boleh digabungkan dengan nama animasi yang ditakrifkan oleh @keyframes untuk mengawal proses peralihan animasi dengan lebih terperinci. Atribut ini ialah atribut komposit seperti sempadan, latar belakang dan atribut lain.
Untuk mendapatkan maklumat lanjut tentang atribut peralihan, sila rujuk penjelasan terperinci tentang atribut peralihan CSS3.
Struktur tatabahasa:
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ] || [animation-play-state] || [animation-fill-mode]]*
Analisis parameter:
1.nama-animasi: Atribut ini menentukan nama animasi yang digunakan pada elemen Nama ini ditakrifkan oleh @keyframes.
2.animation-duration: Atribut ini digunakan untuk menentukan tempoh animasi.
3.animation-timing-function: Digunakan untuk menentukan jenis peralihan animasi.
4.animation-delay: Digunakan untuk menentukan masa tunda untuk animasi mula dilaksanakan.
5.animation-iteration-count: digunakan untuk menentukan bilangan ulangan animasi.
6.arah-animasi: Digunakan untuk menentukan sama ada pergerakan songsang akan berlaku dalam gelung animasi.
7.animation-play-state: Menentukan sama ada animasi sedang berjalan atau dijeda.
8.mod-isi-animasi: Menentukan keadaan di luar masa animasi objek.
Arahan khas:
1 Jika berbilang set nilai atribut disediakan, pisahkan dengan koma.
2. Ciri skrip yang sepadan ialah animasi.
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 alternate;
-webkit-animation:theanimation 5s infinite alternate ;
-moz-animation:theanimation 5s infinite alternate ;
-o-animation:theanimation 5s infinite alternate ;
-ms-animation:theanimation 5s infinite 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 nilai atribut kiri elemen div untuk menghidupkan peralihan daripada 0px kepada 200px, dan boleh mengulangi kitaran tanpa terhingga, dan boleh melakukan pergerakan 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:theanimation 4s infinite alternate;
-webkit-animation:theanimation 4s infinite alternate ;
-moz-animation:theanimation 4s infinite alternate ;
-o-animation:theanimation 4s infinite alternate ;
-ms-animation:theanimation 4s infinite alternate ;
}
@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>Kod di atas adalah lebih rumit daripada yang pertama. Berikut ialah pengenalan kepada proses berjalannya.
1. Jumlah masa keseluruhan animasi ditetapkan kepada 4 saat.
2.@keyframes mentakrifkan empat peringkat animasi Tetapkan nilai atribut kiri daripada 0 hingga 100px dalam tempoh masa 0%-25% dan tukar warna latar belakang daripada merah kepada biru, 25%-50%, 50% -75 Perkara yang sama berlaku untuk % dan 75%-100%.
3. Dan boleh mencapai gelung tak terhingga dan kesan gerakan 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 alternate,secondanimation 2s infinite alternate;
-webkit-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-moz-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-o-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-ms-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
}
@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 menetapkan berbilang set atribut animasi untuk div pada satu masa, dipisahkan dengan koma.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
