Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menetapkan kelewatan untuk animasi css3 selama beberapa saat
Bagaimana untuk menetapkan kelewatan untuk animasi css3 selama beberapa saat
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
- 2022-03-16 11:35:039703semak imbas
Dalam CSS3, anda boleh menggunakan atribut "animation-delay" untuk menetapkan kelewatan animasi selama beberapa saat Fungsi atribut ini adalah untuk menentukan apabila animasi bermula saat "s" atau milisaat ms", sintaksnya ialah "animation-delay: time;".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara untuk menetapkan kelewatan selama beberapa saat dalam animasi css3
Atribut kelewatan-animasi mentakrifkan apabila animasi bermula.
unit nilai kelewatan animasi boleh menjadi saat (s) atau milisaat (ms).
Petua: Nilai negatif dibenarkan, -2s menyebabkan animasi dimulakan serta-merta, tetapi melangkau 2 saat untuk memasuki animasi.
Sintaks
animation-delay: time;
masa adalah pilihan. Mentakrifkan masa, dalam saat atau milisaat, untuk menunggu sebelum animasi bermula. Nilai lalai ialah 0
Contohnya adalah seperti berikut;
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-delay:3s;
/*Safari 和 Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:3s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari 和 Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong>animation-delay 属性不兼容 Internet Explorer 9以及更早版本的浏览器。</p>
<div></div>
</body>
</html>Animasi hasil output ditangguhkan selama 3 saat, hasilnya adalah seperti berikut:
(Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelewatan untuk animasi css3 selama beberapa saat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!