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