animation-iteration-count 屬性定義動畫的播放次數。
Internet Explorer 10、Firefox 以及 Opera 支持 animation-iteration-count 屬性。Safari 和 Chrome 支持替代的 -webkit-animation-iteration-count 屬性。
注意：Internet Explorer 9 以及更早的版本不支持 animation-iteration-count 屬性。
基本介紹
- 中文名：動畫疊代
- 外文名：animation-iteration-count
- 所屬語言：CSS
定義和用法,語法,示例,
定義和用法
| 默認值： | 1 |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.animationIterationCount=3 |
語法
animation-iteration-count: n | infinite;
| 值 | 描述 |
|---|---|
n | 定義動畫播放次數的數值。 |
infinite | 規定動畫應該無限次播放。 |
參考資料
示例
h1 {
font - size: 16px;
}
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 - animation: animations 1.5s ease infinite; - webkit - animation: animations 1.5s ease infinite; - o - animation: animations 1.5s ease infinite; - ms - animation: animations 1.5s ease infinite;
animation: animations 1.5s ease infinite;
}@ - webkit - keyframes animations {
0 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}
50 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .3);
}
100 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}
}@ - moz - keyframes animations {
0 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}
50 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .3);
}
100 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}
}@ - o - keyframes animations {
0 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}
50 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .3);
}
100 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}
}@ - ms - keyframes animations {
0 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}
50 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .3);
}
100 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}
}@keyframes animations {
0 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}
50 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .3);
}
100 % {
box - shadow: 0 0 10px rgba(204, 102, 0, .8);
}abc
