Сегодня всё большее число сайтов использует 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) можете сделать самостоятельно.

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

Вам также могут понравиться

Современные способы заработка на сайтах

Современные способы заработка на сайтах

Не для кого не секрет, что в современном мире вы можете зарабатывать определённые деньги на своём сайте ничего не продавая. Говоря «ничего не продавая», я имею ввиду классическую схему, когда вы продаёте свои услуги, перепродаёте товар (предварительно закупая или используя схемы прямой поставки «дроп-шиппинга») или что-то производите. В статье рассмотрим методы, которые не требуют от вас подобных действий. И так, рассмотрим основные методы в порядке возрастания их сложности и времени которое требуется от владельца сайта.

Пользовательский тип свойств инфоблока в 1С Битрикс

Пользовательский тип свойств инфоблока в 1С Битрикс

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

Условные операторы в PHP

Условные операторы в PHP

Добрались до логики выполнения программы. И так условные операторы (по другому операторы ветвления) позволяют нам организовать определённое поведение программы в зависимости от входных параметров (данных вводимых пользователем, результатом работы вспомогательных функций). Вся логика в языках программирования основана на Алгебре Буля. 

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

Самые читаемые

Основы SEO оптимизации сайта

Основы SEO оптимизации сайта

Эта статья не истина в последней инстанции, а лишь набор правил которые я применяю при создании/испр...

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Одним из преимуществ интернет-магазинов на 1С Битрикс на мой взгляд является наличие не так давно до...

Собственный тип пользовательских полей в 1С Битрикс

Собственный тип пользовательских полей в 1С Битрикс

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