animation-delay是檢索或設定對象動畫的延遲時間。
基本介紹
- 外文名：animation-delay
- 適用範圍：可以適用在任何DOM元素
- 官方語法：animation-delay：<time>
簡介,示例,
簡介
animation-delay
animation-delay 屬性定義動畫何時開始。
animation-delay 值以秒或毫秒計。
提示：允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫。
語法：
animation-delay： [ , ]*
默認值：0
取值：
：
指定對象動畫延遲的時間
說明：
檢索或設定對象動畫的延遲時間
如果提供多個屬性值，以逗號進行分隔。
對應的腳本特性為animationDelay。
寫法：
核心類型寫法
Webkit(Chrome/Safari)-webkit-animation-delay
Gecko(Firefox)-moz-animation-delay
Presto(Opera)
Trident(IE)-ms-animation-delay
W3Canimation-delay
瀏覽器支持
Internet Explorer10、firefox以及Opera支持animation-delay屬性。
Safari和Chrome支持替代-webkit-animation-delay屬性。
注釋：Internet Explorer 9以及更早的版本不支持animation-delay屬性。
示例
h1 {
font - size: 16px;
}
p {
position: relative;
z - index: 2;
height: 200px;
margin: 300px 0 0 0;
background: #fff;
}
p: after {
position: absolute;
z - index: 3;
top: 0px;
left: 0;
width: 100 % ;
height: 1px;
background: #ddd;
content: '';
box - shadow: 0 0 30px 1px rgba(0, 0, 0, .9);
}
div {
width: 100px;
height: 100px;
padding: 10px;
border - radius: 61px;
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
background: #F6D66E;
background: -moz - linear - gradient(top, #fff, #F6D66E);
background: -webkit - linear - gradient(top, #fff, #F6D66E);
background: -o - linear - gradient(top, #fff, #F6D66E);
background: -ms - linear - gradient(top, #fff, #F6D66E);
background: linear - gradient(top, #fff, #F6D66E); - moz - transform: translate(600px, 450px); - webkit - transform: translate(600px, 450px); - o - transform: translate(600px, 450px); - ms - transform: translate(600px, 450px);
transform: translate(600px, 450px); - moz - animation: animations2 1s ease,
animations 6s ease 1s; - webkit - animation: animations2 1s ease,
animations 6s ease 1s; - o - animation: animations2 1s ease,
animations 6s ease 1s; - ms - animation: animations2 1s ease,
animations 6s ease 1s;
animation: animations2 1s ease,
animations 6s ease 1s;
}@ - webkit - keyframes animations {
0 % { - webkit - transform: translate(0, 0);
}
55 % { - webkit - transform: translate(480px, 360px);
}
100 % { - webkit - transform: translate(600px, 450px);
}
}@ - moz - keyframes animations {
0 % { - moz - transform: translate(0, 0);
}
55 % { - moz - transform: translate(480px, 360px);
}
100 % { - moz - transform: translate(600px, 450px);
}
}@ - o - keyframes animations {
0 % { - o - transform: translate(0, 0);
}
55 % { - o - transform: translate(480px, 360px);
}
100 % { - o - transform: translate(600px, 450px);
}
}@ - ms - keyframes animations {
0 % { - ms - transform: translate(0, 0);
}
55 % { - ms - transform: translate(480px, 360px);
}
100 % { - ms - transform: translate(600px, 450px);
}
}@keyframes animations {
0 % {
transform: translate(0, 0);
}
55 % {
transform: translate(480px, 360px);
}
100 % {
transform: translate(600px, 450px);
}
}@ - moz - keyframes animations2 {
0 % { - moz - transform: translate(0, 0);
}
100 % { - moz - transform: translate(0, 0);
}
}@ - webkit - keyframes animations2 {
0 % { - webkit - transform: translate(0, 0);
}
100 % { - webkit - transform: translate(0, 0);
}
}@ - o - keyframes animations2 {
0 % { - o - transform: translate(0, 0);
}
100 % { - o - transform: translate(0, 0);
}
}@ - ms - keyframes animations2 {
0 % { - ms - transform: translate(0, 0);
}
100 % { - ms - transform: translate(0, 0);
}
}@keyframes animations2 {
0 % {
transform: translate(0, 0);
}
100 % {
transform: translate(0, 0);
}abc
