Свойство 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. Неуказанные параметры будут принимать значения по умолчанию.

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

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

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