Свойство animation-direction

Устанавливает направление анимации

animation-direction: normal;

поддерживается начиная с
частичная поддержка до
не поддерживается

Значения

animation-direction: normal;

Анимация проигрывается только вперед. После окончания анимации элемент принимает начальную позицию анимации

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

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

animation-direction: reverse;

Анимация проигрывается в обратном направлении, с конечного положения в начальное. После окончания анимации элемент принимает конечную позицию анимации

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

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

animation-direction: alternate;

Анимация проигрывается сначала вперед, потом назад

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

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

animation-direction: alternate-reverse;

Анимация проигрывается с конечного положения в начальное, а потом обратно

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

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

animation-direction: alternate, alternate-reverse;

Направление анимации для разных анимаций элемента, если их указано несколько

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

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

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

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

Свойство animation-direction

Устанавливает направление анимации

Значения

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

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