簡介
取值：running：
運動
paused：
暫停
說明：
檢索或設定對象動畫的狀態
如果提供多個屬性值，以逗號進行分隔。
對應的腳本特性為animationPlayState。
寫法：
核心類型寫法
Webkit(Chrome/Safari)-webkit-animation-play-state
Gecko(Firefox)-moz-animation-play-state
Presto(Opera)
Trident(IE)-ms-animation-play-state
W3Canimation-play-state
示例
h1 {font - size: 16px;
}
p {
overflow: hidden;
height: 1px;
margin: 302px 0 0;
background: #ddd;
}
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(280px, 300px); - webkit - transform: translate(280px, 300px); - o - transform: translate(280px, 300px); - ms - transform: translate(280px, 300px);
transform: translate(280px, 300px); - moz - animation: animations 6s linear; - webkit - animation: animations 6s linear; - o - animation: animations 1.5s linear - ms - animation: animations 1.5s linear;
animation: animations 1.5s linear;
}
div: hover { - moz - animation - play - state: paused; - webkit - animation - play - state: paused; - o - animation - play - state: paused; - ms - animation - play - state: paused;
animation - play - state: paused;
}@ - webkit - keyframes animations {
0 % { - webkit - transform: translate(0, 0);
}
10 % { - webkit - transform: translate(0, 300px);
}
20 % { - webkit - transform: translate(60px, 60px);
}
30 % { - webkit - transform: translate(60px, 300px);
}
40 % { - webkit - transform: translate(120px, 120px);
}
50 % { - webkit - transform: translate(120px, 300px);
}
60 % { - webkit - transform: translate(180px, 180px);
}
70 % { - webkit - transform: translate(180px, 300px);
}
80 % { - webkit - transform: translate(240px, 240px);
}
90 % { - webkit - transform: translate(240px, 300px);
}
100 % { - webkit - transform: translate(280px, 300px);
}
}@ - moz - keyframes animations {
0 % { - moz - transform: translate(0, 0);
}
10 % { - moz - transform: translate(0, 300px);
}
20 % { - moz - transform: translate(60px, 60px);
}
30 % { - moz - transform: translate(60px, 300px);
}
40 % { - moz - transform: translate(120px, 120px);
}
50 % { - moz - transform: translate(120px, 300px);
}
60 % { - moz - transform: translate(180px, 180px);
}
70 % { - moz - transform: translate(180px, 300px);
}
80 % { - moz - transform: translate(240px, 240px);
}
90 % { - moz - transform: translate(240px, 300px);
}
100 % { - moz - transform: translate(280px, 300px);
}
}@ - o - keyframes animations {
0 % { - o - transform: translate(0, 0);
}
10 % { - o - transform: translate(0, 300px);
}
20 % { - o - transform: translate(60px, 60px);
}
30 % { - o - transform: translate(60px, 300px);
}
40 % { - o - transform: translate(120px, 120px);
}
50 % { - o - transform: translate(120px, 300px);
}
60 % { - o - transform: translate(180px, 180px);
}
70 % { - o - transform: translate(180px, 300px);
}
80 % { - o - transform: translate(240px, 240px);
}
90 % { - o - transform: translate(240px, 300px);
}
100 % { - o - transform: translate(280px, 300px);
}
}@ - ms - keyframes animations {
0 % { - ms - transform: translate(0, 0);
}
10 % { - ms - transform: translate(0, 300px);
}
20 % { - ms - transform: translate(60px, 60px);
}
30 % { - ms - transform: translate(60px, 300px);
}
40 % { - ms - transform: translate(120px, 120px);
}
50 % { - ms - transform: translate(120px, 300px);
}
60 % { - ms - transform: translate(180px, 180px);
}
70 % { - ms - transform: translate(180px, 300px);
}
80 % { - ms - transform: translate(240px, 240px);
}
90 % { - ms - transform: translate(240px, 300px);
}
100 % { - ms - transform: translate(280px, 300px);
}
}@keyframes animations {
0 % {
transform: translate(0, 0);
}
10 % {
transform: translate(0, 300px);
}
20 % {
transform: translate(60px, 60px);
}
30 % {
transform: translate(60px, 300px);
}
40 % {
transform: translate(120px, 120px);
}
50 % {
transform: translate(120px, 300px);
}
60 % {
transform: translate(180px, 180px);
}
70 % {
transform: translate(180px, 300px);
}
80 % {
transform: translate(240px, 240px);
}
90 % {
transform: translate(240px, 300px);
}
100 % {
transform: translate(280px, 300px);
