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

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

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

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

Как сделать интернет-магазин?

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

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

Синтаксис анимации

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

Синтаксис keyframes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вместо значения infinite в свойстве animation поставить какое-то число (например 2), то анимация повторится только 2 раза.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • animation-name – позволяет задать имя анимации
  • animation-duration – определяет время анимации. Может задаваться в секундах и миллисекундах.
  • animation-delay – позволяет задать задержку для анимации, например чтобы она начиналась или повторялась не сразу после загрузки страницы, а с небольшой паузой.
  • animation-iteration-count – задаёт количество повторений анимации. Может задаваться числом или значением infinite для бесконечного количества повторов.
  • animation-play-state – позволяет останавливать или запускать анимацию. Можно использовать для остановки анимации при наведении на элемент или в JavaScript для создания сложных анимации. Имеет основные значения paused для остановки анимации и running для возобновления.
  • animation-fill-mode – позволяет управлять порядком применения определённых CSS-свойств к объекту. Имеет следующие значения:
    • forwards – анимация доходит до конечного состояния и не возвращается к предыдущему состоянию
    • backwards — после загрузки страницы состояние элемента возвращается к первому кадру
    • both – объединяет предыдущие 2 свойства
    • none – состояния элемента не меняется до и после анимации
    • inherit – наследует значение родительского блока

  • 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-анимации, показанные в этой статье, вы сможете создавать интересные анимации любой сложности.
На этом у меня всё! Буду рада видеть ваши комментарии.

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

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

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

4 комментария

  1. Юлечка здравствуйте!

    Как всегда у Вас можно найти разные фишки для сайтов, потому я подписана на Ваш блог и на канал Ютуб.

    Вопросы по теме этого урока:

    1. Боюсь лезть в редактор файлов. Нельзя ли эти стили прописать просто на странице в «текст»?

    2. Если прописать стили в редакции темы, не слетит ли это при обновлении?

    Спасибо!

    • Здравствуйте, Марина!
      Спасибо за Ваш комментарий!
      По Вашим вопросам:
      1. Да, можно, но нужно писать эти CSS стили внутри тегов

      2. После обновления темы CSS файл обновится и изменения затрутся.

  2. Спасибо Юлечка! А у Вас есть урок по этой теме? Если нет, то планируете ли Вы его записать? Мне интересно это.

    Спасибо!

    • Спасибо Марина! К этой статье есть видеоурок. Он размещён в конце статьи.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif