За годы работы с Front End технологиями мне приходилось работать с разными способами анимации. В этой статье я хочу подробнее разобрать, как работает анимация в CSS без использования JavaScript.
В CSS есть свойство animation, которое позволяет анимировать практически любое свойство HTML элемента. Правило анимации указывается в блоке keyframes.
Свойство animation может быть использовано для анимации других свойств CSS, таких как цвет фона, высота, длинна, положение элемента и многие другие.
Давайте рассмотрим пример, где мы меняем цвет фона у элемента.
Создадим в HTML элемент с классом «element»:
В CSS создаем правило для анимации в блоке keyframes. Назовем анимацию changeColor. Анимация будет менять цвет фона объекта с красного на синий.
@keyframes changeColor { 0% { background-color: red; } 100% { background-color: blue; } }
Здесь 0% — это начало анимации, 100% — это конец анимации. Все что между движок CSS автоматически анимирует в плавное изменениe свойста, которое вы выбрали. В данном случае будет плавное изменение цвета.
Теперь добавим эту анимацию как свойство animation в CSS стилях для элемента. Наш CSS будет выглядеть таким образом:
.element { animation: changeColor 2s infinite; }
Результат данной анимации будет выглядеть так:
Мы можем контролировать анимацию при помощи дополнительных свойств.
В данном примере после имени анимации мы указали скорость анимации (2s) и количество повторений (в данном случае бесконечное количество повторений infinite).
Существует несколько свойств анимации. Рассмотрим каждый из них:
- animation-name: имя анимации определенным правилом keyframes
- animation-duration: сколько времени займет один цикл анимации от 0% до 100%
- animation-timing-function: определяет кривые ускорения, такие как ease и linear
- animation-delay: время задержки между моментом загрузки элемента в браузере и началом анимации.
- animation-direction: указывает направление анимации. По умолчанию анимация идет от 0% до 100%. С помощью данного свойства можно сделать так, чтобы анимация шла в обратную сторону от 100% до 0% или каждый раз меняла направление.
- animation-iteration-count: количество повторений цикла анимации. Можно установить число или указать infinite для бесконечного повторения анимации.
- animation-fill-mode: устанавливает значение, которое устанавливается до начала или после окончания анимации. Например, можно указать, что после завершения всех циклов анимации фон элемента будет зеленый.
- animation-play-state: проигрывает/ставит на паузу анимацию
Свойства анимации указываются таким образом:
.element { animation-name: changeColor; animation-duration: 2s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; }
Все эти свойства можно записать и одной строкой:
.element { animation: changeColor 2s ease-out 0s alternate infinite none running; }
Свойства анимации могут принимать значения, указанные в таблице:
Правило keyframes может иметь неограниченное количество шагов. Не обязательно только начало и конец. Можно указать значения и для середины цикла анимации:
@keyframes changeColor { 0% { background-color: red; } 50% { background-color: yellow; } 100% { background-color: blue; } }
HTML элементу можно одновременно присвоить несколько анимаций. Давайте добавим нашему элементу анимацию move, которая будет двигать элемент влево и вправо.
Добавим новый блок keyframes
@keyframes move { 0% { margin-left: 0px; } 100% { margin-left: 200px; } }
Перечислим анимации через запятую
animation: changeColor 3s infinite, move 4s infinite alternate;
Результат:
Как видите, мы присвоили одному элементу одновременно 2 анимации: движение и смену цветов.
На сайте MDN есть список всех CSS свойств, которые могут быть анимированы.
Практические примеры
Теперь давайте рассмотрим более практические примеры применения CSS анимации, которые используются в веб страницах и веб приложениях.
Анимация спиннера загрузки
Очень часто можно увидеть во время загрузки контента вращающийся спиннер. Давайте создадим такой спиннер при помощи CSS анимации.
В этом примере мы использовали анимацию rotate, где зациклили вращение спиннера на 360 градусов.
@keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} }
Далее мы использовали эту анимацию в списке стилей для элемента:
animation: rotate 1.5s infinite linear
Анимированная форма авторизации
Давайте создадим что-то посложнее. Например анимированную форму авторизации.
Сделаем зацикленную анимацию для кнопки Submit. Добавим анимированный эффект для наведения курсора на кнопку. Сделаем так же анимацию для лейблов Username и Password в момент, когда поля ввода в фокусе.
Подготовим HTML:
Login Submit
Обратите внимание на несколько span в кнопке Submit. Именно их мы потом и будем анимировать.
Добавим статические стили в CSS, чтобы наша форма выглядела красиво:
html { height: 100%; } body { margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); } .login-box { position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; } .login-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .login-box .user-box { position: relative; } .login-box .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .login-box .user-box label { position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; } .login-box form a { position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px } .login-box a:hover { background: #03e9f4; color: #fff; border-radius: 5px; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4; }
Теперь добавим анимации. Анимировать мы будем элементы в кнопке Submit.
Добавим 4 блока keyframes с правилами анимации:
@keyframes btn-anim1 { 0% { left: -100%; } 50%,100% { left: 100%; } } @keyframes btn-anim2 { 0% { top: -100%; } 50%,100% { top: 100%; } } @keyframes btn-anim3 { 0% { right: -100%; } 50%,100% { right: 100%; } } @keyframes btn-anim4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; } }
Как видно, мы будем использовать 4 анимации по одной для каждого . Наши элементы будут двигаться по очереди вверх, вниз, влево, вправо, создавая иллюзию беспрерывного вращения вокруг кнопки.
Добавим теперь эту анимацию каждому элементу:
.login-box a span:nth-child(1) { animation: btn-anim1 1s linear infinite; } .login-box a span:nth-child(2) { animation: btn-anim2 1s linear infinite; animation-delay: .25s } .login-box a span:nth-child(3) { animation: btn-anim3 1s linear infinite; animation-delay: .5s } .login-box a span:nth-child(4) { animation: btn-anim4 1s linear infinite; animation-delay: .75s }
Результат:
Как видите, мы добились стильной анимации, используя только HTML и CSS.
Заключение
В данной статье мы рассмотрели, как использовать анимацию CSS и HTML без использования JavaScript. Инструментарий предоставляемый CSS очень гибкий: можно использовать его для создания большого количество разных анимаций, где лимитом будет только ваше воображение и здравый смысл. Вот здесь можно посмотреть различные креативные CSS анимации для вдохновения.