English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Атрибут CSS3 animation-iteration-count определяет количество раз, которое анимация должна быть воспроизведена перед тем, как остановиться.
В таблице ниже总结了 контекст использования и историю версий этого атрибута.
| Значение по умолчанию: | 1 |
|---|---|
| Применяется к: | Все элементы::before и::after Псевдоэлементы |
| Инherit: | Нет |
| Анимируемые: | Нет.См. также Атрибут анимации. |
| Версия: | Новая функция CSS3 |
| JavaScript грамматика: | object object.style.animationIterationCount=3 |
Грамматика этого атрибута такая:
animation-iteration-count: number | infinite | initial | inherit
Ниже приведен пример того, как использовать атрибут animation-iteration-count.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
animation-name: moveit;
animation-duration: 4s;
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Проверьте, чтобы увидеть‹/›В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| number | Укажите количество повторений анимации. Значением по умолчанию является 1. Запрещены отрицательные значения. |
| infinite | Анимация будет повторяться вечно, то есть бесконечно. |
| initial | Установите этот параметр в его значение по умолчанию. |
| inherit | Если указано, то связанные элементы используют вычисленное значение свойства animation-iteration-count родительского элемента. |
Внимание:Вы можете指定 нецелые значения, такие как 0.5, 0.75 и т.д., что составляет только часть одного цикла анимации, например, значение 0.5 будет играть половину цикла анимации.
Совместимость браузеров для свойства animation-iteration-count, все основные браузеры поддерживают это свойство.
|
Пожалуйста, обратитесь к следующим учебникам:CSS3 анимации.
Соответствующие свойства и правила:animation,animation-name,animation-duration,animation-timing-function,animation-delay,animation-direction,animation-fill-mode,animation-play-state,@keyframes.