Свойство animation

Определяет анимацию для элемента. Сокращенная запись для свойств animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode и animation-play-state

animation: fadeIn 2s linear infinite alternate;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

animation: 2s fadeIn;

Используя два параметра: длительность и название анимации. Эти два параметра обязательные.

<style>
.example-1 {
    width: 200px;
    height: 200px;
    background-color: #d62e2e;
    
    animation: 2s fadeIn;
}
@keyframes fadeIn {
    from {
        opacity: 0;   
    }
    to {
        opacity: 1;   
    }
}
</style>

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

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

<style>
.example-2 {
    width: 200px;
    height: 200px;
    background-color: #d62e2e;
    
    animation: 2s bgAnim, 2s fadeOut 2s;
}
@keyframes bgAnim {
    to {
        background-color: #333;  
    }
}
@keyframes fadeOut {
    to {
        opacity: 0;   
    }
}
</style>

<div class="example-2"></div>
animation: 2s ease-in 1s 2 reverse both paused fadeIn;

Используем все свойства. Название анимации можно указывать либо в начале либо в конце. Остальные параметры нужно указывать в определенном порядке animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode и animation-play-state. Неуказанные параметры будут принимать значения по умолчанию.

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

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

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


Никита
Результат отображается некорректно, квадраты остаются статично красными. Другие примеры анимации работают корректно.