Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah atribut yang digunakan untuk animasi css3 yang hanya gelung sekali?
Apakah atribut yang digunakan untuk animasi css3 yang hanya gelung sekali?
- 青灯夜游asal
- 2022-03-18 15:46:012548semak imbas
Animasi css3 hanya gelung sekali dan ditetapkan dengan atribut "animation-iteration-count" Atribut ini boleh menentukan bilangan pelaksanaan animasi Apabila nilai atribut ini ialah 1, animasi boleh ditetapkan kepada gelung sekali sahaja; sintaks "elemen {animation-iteration-count:1;}".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
animasi css3 hanya gelung sekali dan ditetapkan dengan atribut animation-iteration-count.
Atribut animation-iteration-count boleh menentukan bilangan pelaksanaan animasi dan menentukan berapa kali animasi harus dimainkan.
Apabila nilai atribut ini ialah 1, animasi boleh ditetapkan kepada gelung sekali sahaja.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-iteration-count: 1;
/* Safari and Chrome */
-webkit-animation: mymove 3s;
-webkit-animation-iteration-count: 1;
}
@keyframes mymove {
0% {
top: 0px;
}
50% {
top: 200px;
}
100% {
top: 0px;
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
0% {
top: 0px;
}
50% {
top: 200px;
}
100% {
top: 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(Mempelajari perkongsian video: tutorial video css, bahagian hadapan web)
Atas ialah kandungan terperinci Apakah atribut yang digunakan untuk animasi css3 yang hanya gelung sekali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!