Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3
Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3
- 青灯夜游asal
- 2022-03-18 16:33:283237semak imbas
Dalam CSS3, anda boleh menggunakan atribut animation-delay untuk menetapkan animasi untuk dimainkan selepas beberapa saat Atribut ini boleh menetapkan masa tunda animasi objek, iaitu, masa menunggu sebelum animasi bermula , dalam saat atau milisaat; sintaks "animation -delay: value unit;", unit boleh menjadi saat (s) atau milisaat (ms).
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam CSS3, anda boleh menggunakan atribut kelewatan animasi untuk menetapkan animasi untuk dimainkan selepas beberapa saat.
Atribut animasi-tunda boleh mengambil semula atau menetapkan masa tunda animasi objek secara sewenang-wenangnya, iaitu, menentukan masa animasi bermula.
Sintaks:
animation-delay: time;
masa: Tentukan masa untuk menunggu sebelum animasi bermula, dalam saat atau milisaat (unit nilai boleh menjadi saat atau milisaat ms); nilai lalai ialah 0.
Petua: Nilai negatif dibenarkan, -2s menyebabkan animasi dimulakan serta-merta, tetapi melangkau 2 saat untuk memasuki animasi.
Contoh: Lengah 5 saat untuk memulakan animasi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
animation-delay: 5s;
/*Safari and Chrome*/
-webkit-animation: mymove 5s infinite;
-webkit-animation-delay: 5s;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(Belajar perkongsian video: tutorial video css, bahagian hadapan web)
Atas ialah kandungan terperinci Bagaimana untuk menetapkan animasi untuk dimainkan selepas beberapa saat dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!