Создаём CSS-анимацию без плагинов

Приветствую вас на сайте Impuls-Web!

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

Как это работает?

В основе создания такой анимации лежит CSS-свойство animation. Благодаря которому мы можем задавать название CSS-анимации, тип, количество повторов, время и направление движения.

Так же нам понадобится правило @keyframes, внутри которого мы будем по шагам описывать начальное и конечное значение CSS-свойств анимируемого элемента, и так же можем задать его промежуточные значения для создания более плавных и интересных эффектов CSS-анимации.

Анимация плавного увеличение и исчезновение элемента

Итак, начнем с самого простого эффекта анимации, это у нас будет эффект плавного появления и исчезновения.

1. 1.Для этого нам нужно будет добавить на свой сайт какое-либо изображение или блок с текстом, или любой другой элемент, и добавить для него определенный CSS-класс. В моем случае я добавляю для этого элемента класс animate-block.
   
2. 2.Далее мы копируем название этого класса и переходим в файл стилей. Открывать мы будем файл стилей активной темы или шаблона. Если ваш сайт работает на CMS WordPress, то это можно сделать из административной части сайта, воспользовавшись меню «Внешний вид» => «Редактор».
   

   И здесь нам необходимо убедиться в том, что у нас открыт файл «Таблица стилей style.css»

3. 3.Все изменения мы будем добавлять, как обычно, в самом конце этого файла.
   Я не сторонник редактирования файлов темы через админку WordPress. На мой взгляд, быстрее, удобнее и безопаснее редактировать их при помощи какого-то редактора кода.

   В файле стилей нашей темы, или же просто в файле стилей сайта, указываем наш CSS-класс, а далее в фигурных скобочках указываем CSS-свойство animation.

   PHP

   .animate-block1 { animation: pulse 3s infinite; }

   1 2 3

   .animate-block1 { animation: pulse 3s infinite; }

   На первом месте у нас стоит название анимации, его мы задаем самостоятельно. Название задается латинскими буквами, и оно может быть произвольным.
   Далее мы задаем время анимации, чем больше это время, тем более плавно будет происходить наша CSS-анимация. В данном случае время задается в секундах.
   Далее мы задаем количество повторов анимации. В данном случае используется значение infinite, что означает бесконечность. То есть наша анимация не будет иметь какое-то ограниченное количество повторений, и будет продолжаться бесконечно.

4. 4.После того, как мы задали название CSS-анимации и объявили ее основные параметры, нам необходимо будет использовать правило @keyframes для того, чтобы задать начальное и конечное значение нашего элемента, а так же, при необходимости, промежуточное значение. В данном примере мы будем изменять уровень прозрачности. В CSS это правило выглядит следующим образом:
   PHP

   @keyframes pulse{ 0% { opacity:0; /*Уровень прозрачности элемента*/ } 50%{ opacity:1; } 100% { opacity:0; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13

   @keyframes pulse{ 0% { opacity:0; /*Уровень прозрачности элемента*/ } 50%{ opacity:1; } 100% { opacity:0; } }

   Благодаря этому правилу мы можем разделить CSS-анимацию на несколько шагов и для каждого задавать нужные CSS-свойства. Это можно делать при помощи процентов, где 0% будет начальное состояние элемента, а 100% — конечное.
   Так же для этого можно использовать значения:

   • from – начальное значение
   • to — конечное значение

   Но если задавать только начальное и конечное значения то CSS-анимация будет немного дёргаться, поэтому я обычно использую первый вариант с процентами.

Аналогично вы можете задавать не только шаг с интервалом в 50%, но и другие значения. Таким образом, ваш элемент будет плавно анимировано изменять свою прозрачность, цвет, форму, цвет рамки, расположение на странице и т.д.

CSS-анимация поворота

Для создания такого эффекта мы будем плавно изменять угол поворота элемента. Сначала повернём его против часовой стрелки, потом по часовой стрелке и обратно.

Итак, зададим имя анимации, время и укажем бесконечное количество повторов.

А теперь поэтапно изменим угол поворота:

CSS-анимация плавного перемещения и поворота элемента

Для этого примера мы будем изменять сразу несколько CSS свойств

Для начала задаём имя анимации:

А затем поэтапно изменяем CSS-свойства:

Анимация плавного увеличения с появлением рамок

Здесь мы будем изменять уровень увеличения, прозрачность, толщину и цвет рамки, а так же размах и цвет тени.
Задаём название анимации, время и количество повторов:

Далее переходим к заданию начальных, конечных и промежуточных значений:

CSS-анимация поворота и скругления углов

Для реализации такой анимации мы воспользуемся свойством border-radius (//impuls-web.ru/skruglenie-uglov-css/), а так же свойством transform со значением rotate для поворота элемента.
Временной интервал в данном случае будет немного больше чем в предыдущих примерах.

Дополнительные значения CSS-свойства animation

Кроме использованных для данных примеров значений у CSS-свойства animation есть и другие, которые могут вам пригодиться.

• animation-name – позволяет задать имя анимации
  
  PHP

  animation-name: scale;

  1	animation-name: scale;

• animation-duration – определяет время анимации. Может задаваться в секундах и миллисекундах.
  
  PHP

  animation-duration: 3s;

  1	animation-duration: 3s;

• animation-delay – позволяет задать задержку для анимации, например чтобы она начиналась или повторялась не сразу после загрузки страницы, а с небольшой паузой.
  
  PHP

  animation-delay: 3s;

  1	animation-delay: 3s;

• animation-iteration-count – задаёт количество повторений анимации. Может задаваться числом или значением infinite для бесконечного количества повторов.
  
  PHP

  animation-iteration-count: 2;

  1	animation-iteration-count: 2;

• animation-play-state – позволяет останавливать или запускать анимацию. Можно использовать для остановки анимации при наведении на элемент или в JavaScript для создания сложных анимации. Имеет основные значения paused для остановки анимации и running для возобновления.
  
  PHP

  .animate-block:hover { animation-play-state: paused; }

  1 2 3

  .animate-block:hover { animation-play-state: paused; }

• animation-fill-mode – позволяет управлять порядком применения определённых CSS-свойств к объекту. Имеет следующие значения:
  • forwards – анимация доходит до конечного состояния и не возвращается к предыдущему состоянию
  • backwards — после загрузки страницы состояние элемента возвращается к первому кадру
  • both – объединяет предыдущие 2 свойства
  • none – состояния элемента не меняется до и после анимации
  • inherit – наследует значение родительского блока
  PHP

  animation-fill-mode: both;

  1	animation-fill-mode: both;

• animation-timing-function – позволяет задавать значение скорости анимации в начале и в конце.Имеет такие значения:
  • ease — начинается медленно, потом разгоняется и опять замедляется
  • ease-in – начинается медленно, а потом ускоряется
  • ease-out – начинается быстро, а потом замедляется
  • ease-in-out – медленно начинается и заканчивается
  • linear – происходи равномерно
  • step-start – разбивает анимацию на шаги
  • step-end – изменения происходят в конце каждого шага
  • steps(количество шагов,start|end) – ступенчатая анимация
  • cubic-bezier(x1, y1, x2, y2) – анимация по кривой Безье. Вместо переменных в скобках задаются значения от 0 до 1.

Так же можно задавать сразу несколько значений для CSS-свойства animation:

Видеоинструкция

Используя приёмы и свойства для создания CSS-анимации, показанные в этой статье, вы сможете создавать интересные анимации любой сложности.
На этом у меня всё! Буду рада видеть ваши комментарии.

Успехов вам и вашим проектам!

С уважением Юлия Гусарь