- Теория
- Теория
Множественная анимация, шаг 2
Теперь разберём, как добавить элементу вторую параллельную анимацию.
Допустим, у нас есть две анимации:
@keyframes move {
to { left: 100px; }
}
@keyframes stretch {
to { width: 100px; }
}
Чтобы назначить элементу вторую анимацию, нужно добавить её название и длительность через запятую в свойствах animation-name
и animation-duration
. Вот так:
.element {
animation-name: move, stretch;
animation-duration: 5s, 5s;
}
В этом примере две анимации запустятся одновременно, элемент будет параллельно двигаться и удлиняться в течение 5-ти секунд.
Множественные анимации задаются так же, как и множественные фоны и тени — с помощью перечисления свойств через запятую.
Добавим к элементу из прошлого шага вторую анимацию.
Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.