Свойство animation-name

Указывается имя анимации, которую нужно воспроизвести

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

Значения

animation-name: none;

Отключает анимацию

animation-name: moveX;

Указываем имя анимации

<style>
.example-1 {
    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-1"></div>
animation-name: moveX, bgChange;

Список нескольких анимаций

<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)

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