animation-duration是一個電腦程式，檢索或設定對象動畫的持續時間。
簡介,示例,
簡介
animation-duration
語法：
animation-duration： [ , ]*
默認值：0
取值：
：
指定對象動畫的持續時間
說明：
檢索或設定對象動畫的持續時間
如果提供多個屬性值，以逗號進行分隔。
對應的腳本特性為animationDuration。
寫法：
核心類型寫法
Webkit(Chrome/Safari)-webkit-animation-duration
Gecko(Firefox)-moz-animation-duration
Presto(Opera)
Trident(IE)-ms-animation-duration
W3Canimation-duration
示例
html {
height: 100 % ;
background: -moz - linear - gradient(top, #fff, #000);
background: -webkit - linear - gradient(top, #fff, #000);
background: -o - linear - gradient(top, #fff, #000);
background: -ms - linear - gradient(top, #fff, #000);
background: linear - gradient(top, #fff, #000);
}
h1 {
font - size: 16px;
}
div {
position: absolute;
top: 50 % ;
left: 50 % ;
width: 500px;
height: 80px;
margin: -40px 0 0 - 250px;
color: #fff;
font: bold 50px / 1.5 Georgia,
arial,
simsun,
serif;
text - shadow: 1px 1px 0 rgba(0, 0, 0, .8),
2px 2px 3px rgba(255, 255, 255, .3); - moz - animation: animations 2s ease - in-out; - webkit - animation: animations 2s ease - in-out; - o - animation: animations 2s ease - in-out; - ms - animation: animations 2s ease - in-out;
animation: animations 2s ease - in-out;
}@ - moz - keyframes animations {
0 % { - moz - transform: translate(0, -150px);
}
30 % { - moz - transform: translate(0, -150px);
}
40 % { - moz - transform: translate(0, 0);
}
42 % { - moz - transform: scale(1.1, .6) skew(5deg, 5deg);
}
48 % { - moz - transform: scale(1) skew(0, 0);
}
54 % { - moz - transform: scale(1.05, .8) skew(4deg, 4deg);
}
60 % { - moz - transform: scale(1) skew(0, 0);
}
64 % { - moz - transform: skew(3deg, 3deg);
}
68 % { - moz - transform: skew(0, 0);
}
75 % { - moz - transform: skew(2deg, 2deg);
}
83 % { - moz - transform: skew(0, 0);
}
92 % { - moz - transform: skew(1deg, 1deg);
}
100 % { - moz - transform: skew(0, 0);
}
}@ - webkit - keyframes animations {
0 % { - webkit - transform: translate(0, -150px);
}
30 % { - webkit - transform: translate(0, -150px);
}
40 % { - webkit - transform: translate(0, 0);
}
42 % { - webkit - transform: scale(1.1, .6) skew(5deg, 5deg);
}
48 % { - webkit - transform: scale(1) skew(0, 0);
}
54 % { - webkit - transform: scale(1.05, .8) skew(4deg, 4deg);
}
60 % { - webkit - transform: scale(1) skew(0, 0);
}
64 % { - webkit - transform: skew(3deg, 3deg);
}
68 % { - webkit - transform: skew(0, 0);
}
75 % { - webkit - transform: skew(2deg, 2deg);
}
83 % { - webkit - transform: skew(0, 0);
}
92 % { - webkit - transform: skew(1deg, 1deg);
}
100 % { - webkit - transform: skew(0, 0);
}
}@ - o - keyframes animations {
0 % { - o - transform: translate(0, -150px);
}
30 % { - o - transform: translate(0, -150px);
}
40 % { - o - transform: translate(0, 0);
}
42 % { - o - transform: scale(1.1, .6) skew(5deg, 5deg);
}
48 % { - o - transform: scale(1) skew(0, 0);
}
54 % { - o - transform: scale(1.05, .8) skew(4deg, 4deg);
}
60 % { - o - transform: scale(1) skew(0, 0);
}
64 % { - o - transform: skew(3deg, 3deg);
}
68 % { - o - transform: skew(0, 0);
}
75 % { - o - transform: skew(2deg, 2deg);
}
83 % { - o - transform: skew(0, 0);
}
92 % { - o - transform: skew(1deg, 1deg);
}
100 % { - o - transform: skew(0, 0);
}
}@ - ms - keyframes animations {
0 % { - ms - transform: translate(0, -150px);
}
30 % { - ms - transform: translate(0, -150px);
}
40 % { - ms - transform: translate(0, 0);
}
42 % { - ms - transform: scale(1.1, .6) skew(5deg, 5deg);
}
48 % { - ms - transform: scale(1) skew(0, 0);
}
54 % { - ms - transform: scale(1.05, .8) skew(4deg, 4deg);
}
60 % { - ms - transform: scale(1) skew(0, 0);
}
64 % { - ms - transform: skew(3deg, 3deg);
}
68 % { - ms - transform: skew(0, 0);
}
75 % { - ms - transform: skew(2deg, 2deg);
}
83 % { - ms - transform: skew(0, 0);
}
92 % { - ms - transform: skew(1deg, 1deg);
}
100 % { - ms - transform: skew(0, 0);
}
}@keyframes animations {
0 % {
transform: translate(0, -150px);
}
30 % {
transform: translate(0, -150px);
}
40 % {
transform: translate(0, 0);
}
42 % {
transform: scale(1.1, .6) skew(5deg, 5deg);
}
48 % {
transform: scale(1) skew(0, 0);
}
54 % {
transform: scale(1.05, .8) skew(4deg, 4deg);
}
60 % {
transform: scale(1) skew(0, 0);
}
64 % {
transform: skew(3deg, 3deg);
}
68 % {
transform: skew(0, 0);
}
75 % {
transform: skew(2deg, 2deg);
}
83 % {
transform: skew(0, 0);
}
92 % {
transform: skew(1deg, 1deg);
}
100 % {
transform: skew(0, 0);
}
}文字落下2s內趨於平穩：CSS3 Animationsabc
