Не пропусти свежие посты, подпишись:

Сегодня всё большее число сайтов использует css анимацию для отрисовки различных элементов, будь то кнопки, формы, слайдеры и т.п. это значительно улучшает впечатление пользователя от работы с сайтом, к тому же анимация делает сайт «живым» и позволяет проще ориентироваться, т.к. посетитель сразу видит активные элементы (меню, кнопки реагирующие на наведение мышки) и пассивные (текст).

Сразу хочу сказать, что сделать анимированные элементы на сайте при помощи CSS, на самом деле не сложно. Основная суть в том, что вы создаёте 2 класса описывающих начальное состояние элемента и конечное (внешний вид) плюс указываете правила по которым это состояние должно меняться и время за которое это должно произойти и всё.

Основные свойства CSS анимации

Давайте разберём при помощи каких свойств создаётся анимация:

  • animation-name — уникальное имя анимации, по сути оно описывает и позволяет сразу применить набор правил анимации к элементу
  • animation-duration — продолжительность анимации в секундах.
  • animation-timing-function — кривая изменения скорости анимации. Это математическая функция описывает скорость анимации в течении заданного времени продолжительности анимации (duration) Может принимать значения: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n).
  • animation-delay — задержка в секундах перед началом анимации.
  • animation-iteration-count — количество повторов анимации. Целое число или infinite чтобы анимация выполнялась бесконечно.

Давайте более детально разберём некоторые из вышеперечисленных свойств.

Свойство animation-name

Данное свойство работает в связке с такой штукой как @keyframes. Правило описанное в @keyframes задаёт ключевые кадры анимации элемента, другими словами оно описывает значения принимаемые css свойствами элемента (например степень прозрачности, размер, цвет) в заданный момент времени.

Пример анимации


@keyframes move {
 from { left: 0; }
 to { left: 300px; }
}

В данном примере мы создали @keyframe с именем move (движение), который затем укажем в параметре animation-name. Данное правило сообщает элементу, что тот должен изменять значение свойства left c 0 до 300 пикселей за заданный промежуток времени. Кстати вместо ключевых слов from и to в описании ключевых кадров, можно было использовать 0% и 100% соответственно.

Свойство animation-duration

Это свойство определяет длительность анимации в секундах s или в миллисекундах ms. По умолчанию стоит значение 0s это говорит браузеру, что анимация не должна выполняться. Отрицательные значения являются недействительными. Пример:


animation-duration: 6s;
animation-duration: 120ms;

Свойство animation-timing-function

Данное свойство определяет то, как будет выполняться анимация, а точнее кривую скорости которая представляет из себя математическую функцию «кривую Безье».

Кривая Безье



У этого свойства есть набор предопределённых значений, а так же значения в виде функции с произвольным набором аргументов. Давайте рассмотрим допустимые значения:
  • ease — анимация начинается медленно, потом ускоряется и к концу снова замедляется.
  • linear — линейная функция, скорость анимации не меняется в течении её выполнения
  • ease-in — анимация с медленным стартом
  • ease-out — анимация с медленным окончанием
  • cubic-bezier() — кубическая функция Безье, она принимает 4 числовых значения от 0 до 1, по сути это 2 пары координат x, y определяющие точки начала и конца кривой Безье. Например cubic-bezier(0.25,0.1,0.25,1) соответствует кривой описанной значением ease. В конструкторе кубической функции Безье вы сможете наглядно подобрать необходимые для вашей анимации значения.
  • steps() — указывает пошаговую функцию с двумя параметрами. Первый задаёт число интервалов функции (целое число больше нуля), второй принимает значения start или end и указывает точку в которой изменение значений происходит в пределах интервала. Второй параметр — необязательный, по умолчанию end.
  • step-start — предустановленный вариант функции steps() свойство сразу принимает конечное значение в ключевом кадре @keyframe, эквивалентно steps(1, start).
  • step-end — предустановленный вариант функции steps(), свойство принимает конечное значение в конце шага, эквивалентно steps(1, end).

Рассмотрим пример работы анимации с указанными значениями animation-timing-function.

Свойство animation-delay

Тут всё просто, свойство задаёт задержку в миллисекундах перед началом анимации.


animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

Свойство animation-iteration-count

Данное свойство задаёт количество повторений анимации. По умолчанию анимация повторяется один раз, свойство может принимать в качестве значения целое число или infinite если нужно зациклить анимацию.


/* Анимация зациклена */
animation-iteration-count: infinite;

/* Анимация выполнится 3 раза */
animation-iteration-count: 3;

Готовые библиотеки для CSS анимации

В большинстве случаев вам как верстальщику не придётся с нуля прописывать все параметры анимации чтобы добиться желательного эффекта. В сети существует множество готовых библиотек для реализации различных CSS эффектов анимации. Одна из популярных библиотек, которой я так же неоднократно пользовался, называется Animate css.

Работает она наподобие Bootstrap, чтобы получить нужное поведение элемента вы просто добавляете требуемые css класс описывающий анимацию.

Например:


.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}


Здесь параметр animation (эквивалент animation-name) принимает имя кейфрейма в котором описана анимация из библиотеки Animate CSS. Использование таких библиотек значительно ускоряет процесс внедрения анимационных эффектов на сайт.

Конструкторы CSS анимации

Помимо готовых библиотек, в интернете вы можете найти множество конструкторов, позволяющих наглядно подобрать эффект анимации для вашего элемента. Один из удобных конструкторов Animasta. В целом общий совет будет такой, прежде чем выдумывать свой эффект, поищите готовое решение в сети или конструктор. Зачастую эти решения будут реализованы лучше и чище, чем вы (особенно в начале изучения css) можете сделать самостоятельно.

Позже я рассмотрю несколько классных эффектов которые универсально подходят практически к любому сайту.

Не пропусти свежие посты, подпишись:
Полезная статья?
(Голосов: 2, Рейтинг: 3.1)
Курсы от партнёров
Хотите освоить востребованную профессию? Воспользуйтесь предложениями от наших партнёров. Пройдите учебный курс по одному из популярных IT направлений.

Все курсы партёнров
Вам также могут понравиться
Кем можно работать в сфере веб-разработки

Кем можно работать в сфере веб-разработки

Хотите начать работать в сфере веб-разработки, но не знаете с чего можно начать? Читайте описание самых популярных веб-профессий, с их описанием, обязанностями и ориентировочными зарплатами.

CSS курсоры

CSS курсоры

В статье рассмотрены возможности изменения курсоров пользователя при помощи CSS

Работа с регистром строк в php

Работа с регистром строк в php

В статье рассмотрены примеры работы с регистром строк в языке PHP, проверка регистра, изменение, инверсия


Комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке