animation-delay属性怎么用-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

animation-delay属性怎么用

青灯夜游

Jan 31, 2019 am 11:14 AM

css3animasi

animation-delay属性是用来定义动画何时开始，以秒或毫秒为单位；使用animation-delay属性可以自定义动画的延迟效果。

animation-delay属性怎么用

CSS3 animation-delay属性

作用：animation-delay 属性定义动画何时开始。animation-delay 值以秒或毫秒计。

语法：

animation-delay: time;

time：可省略，默认值是 0；用来定义动画开始前等待的时间，以秒或毫秒计。

说明：time允许为负值，-2s使动画马上开始，但跳过 2 秒进入动画。

注：Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。

CSS3 animation-delay属性的使用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-delay:2s;

/*Safari and Chrome*/
-webkit-animation:mymove 5s infinite;
-webkit-animation-delay:2s;
}

@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>

效果图：

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！

Atas ialah kandungan terperinci animation-delay属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Menu hamburger dengan sisi cangkuk reaksi dan komponen gayaApr 17, 2025 am 10:21 AM

Kita semua tahu apa menu hamburger, bukan? Apabila corak mula masuk ke dalam reka bentuk web, ia kedua -duanya dihina dan bertepuk tangan kerana minimalisnya

Kesan teks berkaca (dan berkelas)Apr 17, 2025 am 10:19 AM

Halaman pendaratan untuk Apple Arcade mempunyai kesan sejuk di mana beberapa teks "putih" mempunyai sejenis kesan lut. Anda dapat melihat beberapa warna latar belakang

Mendapatkan Netlify Media Besar PergiApr 17, 2025 am 10:17 AM

Saya hanya melakukan ini pada hari yang lain jadi saya fikir saya ' d blognya. Terdapat satu perkara yang dipanggil penyimpanan fail besar Git (Git LFS). Di sini ' s keseluruhan titik itu: ia tetap

Ujian berasaskan model dalam bertindak balas dengan mesin negeriApr 17, 2025 am 10:14 AM

Aplikasi ujian adalah penting untuk memastikan bahawa kod itu bebas ralat dan keperluan logik dipenuhi. Walau bagaimanapun, ujian menulis secara manual adalah

Biarkan ' s membina kedai e-dagang jamStack dengan fungsi NetlifyApr 17, 2025 am 10:13 AM

Ramai orang keliru tentang apa yang Jamstack. Akronim bermaksud JavaScript, API, dan Markup, tetapi sebenarnya, Jamstack tidak perlu memasukkan semua

Elemen melantun sekitar Viewport di CSSApr 17, 2025 am 10:12 AM

Biarkan ' s mengatakan bahawa anda akan melantun elemen di sekeliling skrin, sorta seperti screensaver sekolah lama atau pong atau sesuatu.

Bagaimana menyumbang kepada projek sumber terbukaApr 17, 2025 am 10:10 AM

Berikut ini akan mendapat sedikit pendapat dan bertujuan untuk membimbing seseorang dalam perjalanan mereka ke sumber terbuka. Sebagai prasyarat, anda harus mempunyai asas

NAVBAR NUDGING ON @KEYFRAMERSApr 17, 2025 am 10:09 AM

Saya menjadi tetamu pilihan di Keyframers pada hari yang lain. Kami melihat tembakan dribbble oleh Björgvin Pétur Sigurjónsson dan kemudian perlahan -lahan membinanya,

See all articles