Ранее я писал об анимации транзишенами. Транзишены — это плавная смена ЦСС‑свойств. Например, когда цвет кнопки меняется при наведении — транзишен делает смену плавной. Транзишены не описывают состояния анимации, лишь задают правила перехода каких‑то существующих состояний элемента.
Кейфреймы — другой подход к анимации: описываем «раскадровку» — набор ключевых кадров со значениями свойств в них, а затем применяем её к элементу, меняя значения свойств во времени.
Начнём с простого текстового элемента:
<div class="item">⌘</div>
.item {
display: inline-block;
color: #000;
font-size: 144px;
}Опишем кейфреймы: ключевое слово @keyframes, название кейфреймов и набор «ключевых кадров» — какие значения должны принимать свойства элемента в начале, середине и конце анимации. Браузер дорисует промежуточные кадры.
@keyframes item-anim {
0% {
opacity: 0.1;
}
50% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}Применим кейфреймы к элементу по их названию. Укажем продолжительность анимации и зациклим её словом infinite:
@keyframes item-anim {
0% {
opacity: 0.1;
}
50% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
.item {
display: inline-block;
color: #000;
font-size: 144px;
animation: item-anim 1s infinite;
}Анимировать можно сразу несколько свойств. Главное, чтобы они по смыслу поддерживали плавное изменение значения. Например, нельзя плавно изменить display:none на block — нет промежуточных значений. Но можно плавно изменить прозрачность или цвет.
Ключевых кадров в @keyframes может быть сколько угодно:
@keyframes item-anim {
0% {
color: #000;
opacity: 0.1;
transform: scale(1);
}
33% {
color: blue;
opacity: 1;
transform: scale(1.1);
}
66% {
color: pink;
opacity: 1;
transform: scale(1.1);
}
100% {
color: #000;
opacity: 0.1;
transform: scale(1);
}
}Замедлим анимацию:
@keyframes item-anim {
0% {
color: #000;
opacity: 0.1;
transform: scale(1);
}
33% {
color: blue;
opacity: 1.1;
transform: scale(1.1);
}
66% {
color: pink;
opacity: 1;
transform: scale(1.1);
}
100% {
color: #000;
opacity: 0.1;
transform: scale(1);
}
}
.item {
display: inline-block;
color: #000;
font-size: 144px;
animation: item-anim 3s infinite;
}Вместо infinite можно указать количество воспроизведений анимации. Например, помигать 3 раза. Если ничего не указывать, анимация выполнится один раз, затем свойства элемента вернуться к состоянию до анимации.
В следующем совете расскажу о временны́х функциях и тонкой настройке динамики анимации.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
