Свойство animation-duration

Устанавливает время длительности анимации

animation-duration: 1s;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

animation-duration: 5s;

Длительность анимации в указанных единицах. Возможные единицы: s, ms

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

<div class="example-1"></div>
animation-duration: 4s, 2s;

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

<style>
.example-2 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX, bgChange;
    animation-duration: 4s, 2s;
    animation-iteration-count: infinite;
    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-2"></div>

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

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

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