Свойство animation-iteration-count

Определяет, сколько раз будет воспроизводится анимация

animation-iteration-count: 2;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

animation-iteration-count: 2;

Число циклов анимации. Любое целое или дробное число. По умолчанию 1

<style>
.example-1 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX;
    animation-iteration-count: 2;
    animation-duration: 2s;
    animation-direction: alternate;
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);   
    }
}}
}
</style>

<div class="example-1"></div>
animation-iteration-count: infinite;

Анимация повторяется бесконечно

<style>
.example-2 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-direction: alternate;
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);   
    }
}}
}
</style>

<div class="example-2"></div>
animation-iteration-count: infinite, 2.5;

Количество циклов анимации для разных анимаций элемента, если их указано несколько в animation-name

<style>
.example-3 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX, bgChange;
    animation-duration: 2s, 1s;
    animation-iteration-count: infinite, 2.5;
    animation-direction: alternate;
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);   
    }
}
@keyframes bgChange {
    from {
        background: green;
    }
    to {
        background: red;
    }
}
</style>

<div class="example-3"></div>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии