Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan dan melaksanakan animasi css3 sekali
Bagaimana untuk menetapkan dan melaksanakan animasi css3 sekali
- 青灯夜游asal
- 2022-01-13 12:50:359948semak imbas
Dalam CSS3, anda boleh menggunakan atribut animation-iteration-count untuk menetapkan animasi yang akan dilaksanakan sekali Atribut animation-iteration-count ditetapkan kepada nombor "1", anda boleh menetapkan animasi untuk dimainkan sekali sahaja.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam CSS3, anda boleh menggunakan atribut animation-iteration-count untuk menetapkan animasi untuk dilaksanakan sekali.
Atribut animation-iteration-count boleh menentukan bilangan kali animasi dimainkan dan menetapkan berapa kali animasi harus dimainkan.
Sintaks:
animation-iteration-count: value;
| 值 | 描述 |
|---|---|
| n | 一个数字，定义应该播放多少次动画 |
| infinite | 指定动画应该播放无限次（永远） |
Contoh:
Tetapkan animasi untuk dimainkan sekali sahaja
<!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 {
from {
top: 0px;
}
to {
top: 200px;
}
}
@-webkit-keyframes mymove
/* Safari and Chrome */
{
from {
top: 0px;
}
to {
top: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Ubah suai dan tetapkan animasi untuk dimainkan 3 kali
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-iteration-count: 3;
/* Safari and Chrome */
-webkit-animation: mymove 3s;
-webkit-animation-iteration-count: 3;
}
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk menetapkan dan melaksanakan animasi css3 sekali. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!