Как сделать анимацию в css

SEO Маяк

Всем привет! Сегодня на seo-mayak.com я расскажу и покажу, что такое CSS анимация.

На блоге уже есть одна статья, посвященная анимации — бегущая строка. Там мы заставляли двигаться текст с помощью чистого HTML, а точнее, с помощью тега marquee. Довольно интересный материал, советую почитать.

Сегодня же мы будем создавать анимацию средствами другого языка программирования, который называется CSS.

Для новичков скажу, что язык CSS (англ. Cascading Style Sheets, в переводе Каскадные Таблицы стилей) — это язык описания внешнего вида веб-страницы. Что это значит? А значит это то, что с помощью данного языка формируется внешний вид любого сайта.

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

css animation

Потенциал CSS поистине безграничен, а с выходом CSS3 (третье поколение CSS) появилась возможность заставлять объекты двигаться в реальном времени, причем самым разнообразным образом.

В данной статье мы рассмотрим уникальное свойство CSS3 animation и правило @keyframes, но давайте обо все по-порядку. Поехали!

Основы CSS анимации

Кирпичиками CSS анимации являются: свойство animation и правило @keyframes.

@keyframes — уникальное правило CSS3, позволяющее задавать последовательные кадры анимации.

Свойство animation регулирует подачу анимации. Что я подразумеваю под словом «подача», Вы поймете немного позже.

Итак, снова бегущая строка:

Теперь давайте разберемся как работают свойство animation и правило @keyframes

Свойство animation можно разделить еще на несколько свойств:

animation-name — задает имя анимации;
animation-duration — задает длительность анимации в секундах (s) или миллисекундах (ms);
animation-timing-function — задает скоростные значения анимации;
animation-iteration-count — задает количество повторений анимации;
animation-direction — задает направление анимации;
animation-play-state — задает состояние анимации при наведении курсора;
animation-delay — задает время задержки перед началом анимации в s и ms;
animation-fill-mode — задаем положение элемента до и после анимации.

Чуть позже мы разберем каждое свойство во всех подробностях, а пока я лишь знакомлю Вас с основными инструментами.

Правило @keyframes

Как я уже говорил выше, правило @keyframes задает последовательные кадры анимации. Настало время объяснить, как работает данное правило.

name — имя анимации;
from — начальное состояние элемента;
to — конечное состояние элемента.

Но можно и по-другому:

А теперь давайте подробно разберем все свойства animation.

Семейство свойств animation

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

Итак, берем текст, к примеру «Бегущаа строка» и в HTML прописываем для него класс:

Далее в файле style.css для созданного класса прописываем следующие свойства animation:

Ниже пишем правило анимации:

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

animation-name: test; — мы задали имя анимации test;
animation-duration: 4s; — мы задали длительность анимации в 4 секунды;
animation-iteration-count: infinite; — интересное свойство, с помощью которого мы можем задать количество повторений анимации, (infinite — в переводе с англ. «бесконечный»). Также в этом свойстве можно задать цифровое значение повторений, например: 1 — одно повторение (значение по умолчанию), 2 — два повторения и т.д.

@keyframes test — здесь мы по имени test связываем правило анимации @keyframes с его свойствами animation.
from — задаем начальное положение строки в три пикселя от левого края страницы.
to — задаем конечное положение строки в шестьсот пикселей от левого края страницы.

В итоге получаем такой эффект:

Немного увеличим текст и добавим красок:

HTML

CSS

Теперь давайте более подробно рассмотрим еще одно свойство, которое имеет очень большое значение, так как отвечает за частоту движения объекта и может принимать несколько значений:

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

animation-timing-function: ease; — скольжение (значение по умолчанию) На примере выше мы не применяли свойство animation-timing-function, но на самом деле оно работало и значение у него было, как раз ease, поэтому и скорость не равномерная.

Свойство animation-timing-function может принимать несколько значений, пройдемся по каждому из них.

HTML

CSS

animation-timing-function: ease-in-out; — еще более плавное скольжение;

animation-timing-function: linear; — равномерная скорость движения;

animation-timing-function: ease-in; — ускорение к концу анимации;

animation-timing-function: ease-out; — ускорение в начале анимации;

animation-timing-function: cubic-bezier(.число число, .число число); — с помощью этого значения можно задать эффект разнонаправленности движению анимации:

cubic-bezier(.22, 1.47, .26, -0.49)

animation-timing-function: step-start; — это значение я хочу разобрать подробней, и показать Вам еще одно правило @keyframes:

HTML

CSS

Как видите правило @keyframes может принимать значение в %, что очень удобно при создании анимации. Так вот, с помощью step-start можно проигрывать заданные значения по шагам.

Если внимательно посмотреть на пример, то можно заметить, что при значении step-start пропускается первый шаг анимации.

animation-timing-function: step-end; — при значении step-end пропускается последний шаг анимации.

animation-timing-function: steps(число); — значение steps позволяет упростить пошаговую анимацию. В скобках можно просто прописать количество шагов, а в правиле @keyframes задать первый и последний шаг.

HTML

CSS

При применении значения steps последний шаг упускается.

С помощью вышеупомянутых значений свойства animation-timing-function можно довольно тонко настроит любую анимацию. Идем дальше.

Свойство аnimation-direction

Теперь мы рассмотрим еще одно интересное свойство, которое называется аnimation-direction и его возможные значения.

HTML

CSS

аnimation-direction:normal; — обычное движение строки слева направо.

animation-direction: reverse; — движение анимации из конца в начало.

animation-direction: alternate; — анимация проигрывается сначала в обычном режиме, а затем в обратном направлении.

animation-direction: alternate-reverse; — анимация начинается с конца, доходит до начала, а затем двигается в обратном направлении.

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

Свойство аnimation-delay

C помощью свойства Animation-delay мы можем задать задержку анимации перед началом воспроизведения в секундах или миллисекундах.

HTML

CSS

animation-delay: 0s; — значение по умолчанию.

animation-delay: 5s; — теперь давайте зададим задержку в 5 секунд.

animation-delay: -5s; — также можно задать отрицательное значение задержки воспроизведения.

Есть еще одно интересное свойство.

Свойство аnimation-fill-mode

Работу свойства аnimation-fill-mode можно наблюдать если использовать определенное количества циклов анимации, т.е. в свойстве animation-iteration-count надо задать цифровое значение.

Работа свойства заключается в определении ключевого кадра и воздействие на него, до или после начала анимации.

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

HTML

CSS

animation-fill-mode: none; — свойство применяется к первому активному кадру.

animation-fill-mode: forwards; — свойство применяется к последнему активному кадру, т.е. после завершения воспроизведения, анимациа сохраниться на последнем кадре.

animation-fill-mode: backwards; — анимация применит значения для свойств из начального ключевого кадра, даже если кадр еще не активен.

animation-fill-mode: both; Это своего рода комплексное решение. Анимация применит значения к свойствам первого ключевого кадра в начале воспроизведения, и сохранит значения свойств последнего ключевого кадра после завершения анимации.

Осталось последнее свойство из семейства animation.

Свойство аnimation-play-state

Свойство может принимать всего два значения:

animation-play-state: running; — значение по умолчанию, воспроизведение анимации происходит в обычном режиме.

animation-play-state: paused; — остановка анимации на первом шаге.

В примере ниже я использовал способ остановки анимации в момент наведения курсора, с помощью псевдокласса :hover

HTML

CSS

Сокращенное написание свойств animation

Для упрощения верстки css кода, предусмотрено сокращенное написание всех свойств animation в одну строчку. Порядок или последовательность такая:

Надеюсь понятно, что название свойств надо заменить их значениями и конечно квадратные скобки прописывать не надо. Пример:

Также можно объединить несколько анимаций, перечисляя значения свойств через запятую:

Конечно, для каждого имени анимации должно быть прописано отдельное правило @keyframes.

Кроссбраузерность

Предполагаю, что прежде всего надо объяснить само понятие «Кроссбраузерность».

На заметку! Кроссбраузерность — корректность отображения сайта во всех популярных браузерах.

Сложного здесь ничего нет, просто для каждого браузера существуют определенные вендорные префиксы.

-webkit-animation: значения; — для браузеров: Chrome, Safari, iOS;
-moz-animation: значения; — для браузера Firefox;
-o-animation: значения; — для браузера Opera;
-ms-animation: значения; — для браузера Internet Explorer.

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

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

Также в отдельной статье мы рассмотрим все возможные примеры CSS анимации.

Введение в CSS-анимацию

Введение в CSS-анимацию

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Без лишних слов, приступим.

CSS переходы

Анимация в CSS выполняется с помощью transitions и animations. Переходы используются для менее сложных анимаций, в основном для перехода от одного этапа к другому — отсюда и название.

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

Без перехода получаем:

Теперь добавим анимацию. У переходов есть 4 свойства: transition-property, transition-duration, transition-timing-function, transition-delay.

transition-property: принимает имя свойств CSS, к которым вы хотите добавить эффект перехода, например, transform, color, width. Значение по умолчанию — all, что означает анимацию всех свойств.

Давайте зададим для transition-property background-color, чтобы обнаружить изменения в цвете фона для нашего блока.

Чтобы анимировать несколько свойств, разделите их запятыми:

Или с помощью ключевого слова all:

transition-duration: принимает продолжительность перехода в секундах (с) или миллисекундах (мс). По умолчанию 0 с. Поэтому нам нужно изменить это, чтобы запустить переход.

Давайте добавим transition-duration 2.5s.

Получаем вот что:

transition-timing-function: используется для выбора типа используемой кривой скорости. По умолчанию — ease (медленно в начале, затем быстро, затем медленно в конце). Также есть linear, ease-in, ease-in-out, ease-out. И вы также можете создать свою собственную кривую с помощью кубической функции Безье (но это выходит за рамки данного руководства).

Сравнение разных значений transition-timing-function. Давайте зададим для нашего блока linear.

Давайте установим для нашего бокса линейную функцию перехода.

transition-delay: добавляет задержку перед началом перехода. По умолчанию — 0 с. Давайте введем transition-delay 2s.

Получаем вот это:

Подводя итог, мы задаем изменяемые css-свойства через transition-property. При обнаружении изменений этих свойств будет воспроизведен переход от старых значений к новым. Мы устанавливаем, как долго он будет выполняться с помощью transition-duration. Мы можем настроить кривую скорости анимации с помощью transition-timing-function и добавить задержку с помощью transition-delay.

Сокращение для этих 4-х свойств: transition.

Свойство transition

Свойство transition является обобщающим для transition-property, transition-duration, transition-timing-function, transition-delay в таком порядке:

Примечание: Несмотря на то, по умолчанию transition-property имеет значение all, большинство разработчиков пишут all. Например, transition: all 2s; вместо transition: 2s;.

Заменив четыре свойства перехода для box на transition, мы получим:

Что, если бы мы также захотели повернуть этот блок? Мы можем добавить эффект поворота при наведении, давайте добавим поворот на 180 градусов:

И изменим свойство перехода transition на all:

Поворот по умолчанию — 0 градусов, поэтому переход обнаружит изменение и анимирует его:

Если нам нужен другой переход background-color, мы не можем использовать all. Нам нужно добавить background-color и transform, разделенные запятой:

Примечание: нам не нужно указывать все свойства перехода. Мы можем пропустить те, которые не будем менять. Примеры:

transition: transform 0.3s;=> переход при изменении трансформации длительностью 0,3 с. По умолчанию для transition-timing-function задано значение ease, а для transition-delay — 0 с.

transition: width 5s 1s; => переход при изменении ширины продолжительностью 5 с и с задержкой перехода 1 с.

transition: 0.5s; => переход на изменение всех свойств за 0,5 с.

transition: all 1s linear; => переход для всех свойств изменяется в течение 1 секунды, а для transition-timing-function установлено на linear.

На этом мы завершаем наше небольшое введение в переходы. Теперь давайте рассмотрим другой способ анимации в CSS.

CSS анимация

Анимации с помощью ключевых кадров больше подходит для сложных изменений. Доступно 7 свойств: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode.

animation-name принимает имя ключевого кадра. @keyframes — это правило CSS, которое контролирует шаги анимации. Базовый синтаксис:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

fadeIn произвольное имя, которое мы задали ключевым кадрам.

Эти ключевые кадры будут анимировать непрозрачность от 0, когда анимация начинается, до 1, когда анимация заканчивается.

Совет: некоторые предпочитают использовать синтаксис from / to:

Вышеуказанное делает то же самое, от 0% до 100%. С помощью ключевых кадров мы можем:

определить столько ключевых кадров, сколько мы хотим от 0 до 100%.

анимировать столько свойств, сколько хотим.

и нет необходимости иметь одинаковые свойства для каждого ключевого кадра.

пропустить 0 или 100% — хотя это не рекомендуется из-за проблем совместимости.

Анимируя эти keyFrames, мы получаем:

Мы анимируем цвет фона красного прямоугольника в цвета радуги:

Теперь, чтобы добавить эту анимацию в наш блок, мы добавим animation-name и установим для него имя ключевых кадров:

Аналогично переходам у нас есть: animation-duration, которое устанавливает продолжительность анимации. По умолчанию — 0 с. Мы зададим длительность 5 секунд:

animation-timing-function, которое устанавливает кривую скорости анимации. По умолчанию — ease. Давайте добавим animation-timing-function:

animation-delay, которое устанавливает начальную задержку. По умолчанию — 0 с. Давайте добавим задержку в 1 секунду:

Обратите внимание, как цвет фона блока снова становится красными после окончания анимации.

Последние три относятся к анимации: animation-iteration-count устанавливает количество раз, которое мы хотим воспроизвести анимацию. По умолчанию 1. Мы можем заставить анимацию работать бесконечно, установив для этого свойства значение infinite. Выберем запускать 3 раза:

animation-direction устанавливает, как мы хотим воспроизводить анимацию. Возможные значения: normal, reverse, alternate и alternate-reverse.

normal начинается с 1-го ключевого кадра.

reverse начинается с последнего ключевого кадра.

alternate запуск начинается с 1-го ключевого кадра, но если анимация повторяется, следующая анимация пойдет в обратном направлении.

alternate-reverse — то же самое, что и alternate, за исключением того, что начинается с последнего ключевого кадра.

Вот пример от w3schools. По умолчанию значение normal. Мы собираемся выбрать alternate.

animation-fill-mode определяет стиль элемента, когда анимация не воспроизводится. Его можно задать forwards, чтобы принимать значения последнего ключевого кадра. Или backwards, чтобы принимать значения первого ключевого кадра. Или both. По умолчанию none.

Совет: forwards часто используется после окончания анимации, чтобы сохранить ее в этом конечном состоянии. Без него элемент, для которого прекращена анимация, вернется в исходное состояние.

Давайте добавим режим forwards для заливки:

В 1-й анимации изменения начинаются с красного и заканчиваются фиолетовым.

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

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

Подводя итог, мы используем @keyframes для настройки анимации. Мы обращаемся к этим ключевым кадрам, ссылаясь на их имя в animation-name. Мы устанавливаем animation-duration. Мы можем настроить кривую скорости анимации с помощью animation-timing-function и добавить задержку с помощью animation-delay.

Мы также можем указать количество раз, которое хотим запускать анимацию, с помощью animation-iteration-count, изменить animation-direction, чтобы выбрать направление прохождения ключевых кадров, и animation-fill-mode, чтобы изменить стиль элемента анимации после анимации.

Доступно сокращение для этих 7 свойств: animation.

Свойство animation

Свойство animation является обобщающим для animation-name, animation-duration, animation-timing-function, animation-delay*, animation-iteration-count, **animation-direction, **animation-fill-mode* в таком порядке:

animation: name duration timing-function delay iteration-count direction fill-mode;

CSS анимация для самых маленьких

Приветствую, друзья! Сегодня мы рассмотрим интереснейшую тему — создание CSS анимаций на реальном примере. Кульминацией данного урока будет создание красивой CSS анимации логотипа на миллион долларов.

CSS анимация для самых маленьких - Видеоурок

Создание контентного сайта на Jekyll от А до Я

Материалы урока

  • Исходники: Скачать с GitHub
  • Базовый пример из урока: https://codepen.io/agragregra/pen/PKNavm
  • Стартовый шаблон из урока: https://github.com/agragregra/optimizedhtml-start-template

Немного теории

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

Если у вас уже был опыт создания анимаций в каких-либо приложениях, таких, как Adobe After Effects или престарелый Flash Professional (ныне Adobe Animate), то вам должны быть знакомы такие понятия, как «Ключевые кадры», «Временные функции или динамика движения», которые, как и в любой другой сфере анимации применимы и к анимации элементов на странице посредством CSS. Однако, в отличие от работы с интерфейсами приложений, вы создаете вашу CSS анимацию посредством написания кода в редакторе.

CSS правило @keyframes

Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров.

Давайте рассмотрим структуру @keyframes и работу с ключевыми кадрами на простом примере:

В первой строчке мы видим, что после ключевого слова @keyframes идет его название « turning». Это и есть наименование блока кеймфреймов, к которому мы будем обращаться далее.

После объявления открывается фигурная скобка (в данном примере на чистом CSS), в которой последовательно от 0% до 100% прописываются свойства для каждого ключевого кадра. Обратите внимание, что между 0% и 100% вы можете вставлять сколько угодно промежуточных значений, будь-то 50%, 75% или даже 83%. Это очень похоже на таймлайн приложения для создания анимации, где между двумя состояниями можно добавить любое промежуточное.

Далее этот блок кода с ключевыми кадрами можно применить к любому CSS селектору, но чаще всего они готовятся для конкретного селектора, если мы хотим добиться определенного поведения именно от нужного блока.

Обращение к блоку ключевых кадров

После того, как мы задали ключевые кадры для объекта (в жизни это делается параллельно или даже после обращения к блоку с ключевыми кадрами), можно обратиться к нашему новоиспеченному блоку. Давайте посмотрим на следующий простой код из примера выше:

Ничего особенного до последней строчки. Здесь мы определяем то, как будет выглядеть объект изначально и в последней строчке блока обращаемся к блоку ключевых кадров с наименованием «turning»:

Если с определением ключевых кадров все относительно понятно, то данная строчка нуждается в немедленном объяснении. Как мы видим, сначала идет CSS свойство «animation». Это сокращенная форма записи, как например, свойство «margin: 20px 30px 40px 50px», которое можно разделить на несколько отдельных свойств:

По данной аналогии, составное свойство «animation» можно разделить на несколько отдельных свойств:

animation-name Название анимации, к которому происходит обращение из @keyframes
animation-duration Продолжительность или на какое время растягивается выполнение CSS анимации. Может задаваться в секундах (s) или миллисекундах (ms)
animation-timing-function Временная функция, динамика движения объекта или изменения свойства (ease — (по умолчанию) анимация начинается медленно, разгоняется и заканчивается медленно; linear — анимация происходит равномерно; ease-in — начинается медленно и ускоряется к последнему ключевому кадру; ease-out — начинается быстро и плавно замедляется вконце; ease-in-out — медленно начинается и медленно заканчивается)
animation-delay Время задержки анимации ДО старта. Также задается в секундах или миллисекундах
animation-iteration-count Количество повторов (итерации) анимации (infinite — бесконечно, или можно задать простое число без единиц измерения)
animation-direction Направление анимации, последовательно, вспять или «туда-обратно» (normal — (по умолчанию) анимация проигрывается от начала до конца и останавливается; alternate — проигрывается от начала до конца и в обратном направлении; alternate-reverse — проигрывается с конца до начала и обратно; reverse — анимация проигрывается с конца.)
animation-play-state Управление проигрыванием анимации (paused (пауза), running (запуск) и т.д.). Можно применить на :hover или из функции JS при необходимости
animation-fill-mode Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации

Чаще всего опытные разработчики не пишут все эти свойства по отдельности, а используют краткую запись и структура ее такова:

animation: (1. animation-name — название) (2. animation-duration — продолжительность) (3. animation-timing-function динамика движения) (4. animation-delay — пауза перед стартом) (5. animation-iteration-count — количество выполнений) (6. animation-direction — направление)

Из примера мы видим, что мы обращаемся к блоку @keyframes animationname, задаем продолжительность выполнения анимации 2 секунды, динамика линейная, пауза перед запуском составляет 1 секунду, повторяется анимация бесконечно и выполняется в обратную сторону.

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

Однако, большинство этих свойств можно опустить, так как чаще всего их значения по умолчанию вполне удовлетворят большинство задач по созданию анимации. Какие-то из них можно не писать, однако оставшиеся следует указывать в той последовательности, которую мы рассмотрели ранее. Вообще, для функционирования вашей анимации достаточно всего два параметра в вашем составном свойстве — название (animation-name) и продолжительность (animation-duration).

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

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