Мини-туториал по анимации в CSS и HTML5
За годы работы с 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 будет выглядеть таким образом:
Результат данной анимации будет выглядеть так:
Мы можем контролировать анимацию при помощи дополнительных свойств.
В данном примере после имени анимации мы указали скорость анимации (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: проигрывает/ставит на паузу анимацию
Свойства анимации указываются таким образом:
Все эти свойства можно записать и одной строкой:
Свойства анимации могут принимать значения, указанные в таблице:
Правило keyframes может иметь неограниченное количество шагов. Не обязательно только начало и конец. Можно указать значения и для середины цикла анимации:
@keyframes changeColor < 0% < background-color: red; >50% < background-color: yellow; >100% < background-color: blue; >>HTML элементу можно одновременно присвоить несколько анимаций. Давайте добавим нашему элементу анимацию move, которая будет двигать элемент влево и вправо.
Добавим новый блок keyframes
Перечислим анимации через запятую
animation: changeColor 3s infinite, move 4s infinite alternate;Как видите, мы присвоили одному элементу одновременно 2 анимации: движение и смену цветов.
Практические примеры
Теперь давайте рассмотрим более практические примеры применения CSS анимации, которые используются в веб страницах и веб приложениях.
Анимация спиннера загрузки
Очень часто можно увидеть во время загрузки контента вращающийся спиннер. Давайте создадим такой спиннер при помощи CSS анимации.
В этом примере мы использовали анимацию rotate, где зациклили вращение спиннера на 360 градусов.
Далее мы использовали эту анимацию в списке стилей для элемента:
animation: rotate 1.5s infinite linearАнимированная форма авторизации
Давайте создадим что-то посложнее. Например анимированную форму авторизации.
Сделаем зацикленную анимацию для кнопки Submit. Добавим анимированный эффект для наведения курсора на кнопку. Сделаем так же анимацию для лейблов Username и Password в момент, когда поля ввода в фокусе.
Login Username Password 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
Теперь добавим анимации. Анимировать мы будем элементы в кнопке 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)
Как видите, мы добились стильной анимации, используя только HTML и CSS.
Заключение
В данной статье мы рассмотрели, как использовать анимацию CSS и HTML без использования JavaScript. Инструментарий предоставляемый CSS очень гибкий: можно использовать его для создания большого количество разных анимаций, где лимитом будет только ваше воображение и здравый смысл. Вот здесь можно посмотреть различные креативные CSS анимации для вдохновения.