Учебник по CSS-анимации

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

Вступление

Анимация применяется к элементу с помощьюanimationсвойство.

.container {
  animation: spin 10s linear infinite;
}

spin- это имя анимации, которое нам нужно определить отдельно. Мы также говорим CSS, чтобы анимация длилась 10 секунд, выполнялась линейно (без ускорения или какой-либо разницы в ее скорости) и повторялась бесконечно.

Вы должныопределить, как работает ваша анимацияс помощьюключевые кадры. Пример анимации, вращающей элемент:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

Внутри@keyframesопределение вы можете иметь столько промежуточных путевых точек, сколько захотите.

В этом случае мы инструктируем CSS, чтобы свойство transform поворачивало ось Z от 0 до 360 градусов, завершая полный цикл.

Здесь вы можете использовать любое преобразование CSS.

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

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

Я хочу нарисовать четыре круга, все с общей начальной точкой, и все они находятся на расстоянии 90 градусов друг от друга.

<div class="container">
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
</div>
body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.circle { border-radius: 50%; left: calc(50% - 6.25em); top: calc(50% - 12.5em); transform-origin: 50% 12.5em; width: 12.5em; height: 12.5em; position: absolute; box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5); }

.one, .three { background: rgba(142, 92, 205, 0.75); }

.two, .four { background: rgba(236, 252, 100, 0.75); }

.one { transform: rotateZ(0); }

.two { transform: rotateZ(90deg); }

.three { transform: rotateZ(180deg); }

.four { transform: rotateZ(-90deg); }

Вы можете увидеть их в этом глюке:https://glitch.com/edit/#!/flavio-css-circles

Давайте заставим эту структуру (все круги вместе) вращаться. Для этого мы применяем анимацию к контейнеру и определяем эту анимацию как поворот на 360 градусов:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.container { animation: spin 10s linear infinite; }

Смотрите это наhttps://glitch.com/edit/#!/flavio-css-animations-tutorial

Вы можете добавить больше ключевых кадров, чтобы анимация получилась смешнее:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(30deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  75% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

См. Пример наhttps://glitch.com/edit/#!/flavio-css-animations-four-steps

Свойства анимации CSS

CSS-анимация предлагает множество различных параметров, которые вы можете настроить:

Свойство Описание
animation-name имя анимации, оно ссылается на анимацию, созданную с использованием@keyframes
animation-duration как долго должна длиться анимация, в секундах
animation-timing-function функция времени, используемая анимацией (общие значения:linear,ease). Дефолт:ease
animation-delay необязательное количество секунд ожидания перед запуском анимации
animation-iteration-count сколько раз должна выполняться анимация. Ожидает числа, илиinfinite. Default: 1
animation-direction направление анимации. Возможноnormal,reverse,alternateили жеalternate-reverse. В последних двух он попеременно то вперед, то назад.
animation-fill-mode определяет, как стилизовать элемент, когда анимация заканчивается, после того, как он заканчивает свой номер счетчика итераций.noneили жеbackwardsвернуться к стилям первого ключевого кадра.forwardsиbothиспользуйте стиль, установленный в последнем ключевом кадре
animation-play-state если установлено наpaused, он приостанавливает анимацию. По умолчаниюrunning

Вanimationproperty - это сокращение для всех этих свойств в следующем порядке:

.container {
  animation: name duration timing-function delay iteration-count direction
    fill-mode play-state;
}

Это пример, который мы использовали выше:

.container {
  animation: spin 10s linear infinite;
}

События JavaScript для анимации CSS

Используя JavaScript, вы можете отслеживать следующие события:

  • animationstart
  • animationend
  • animationiteration

Будь осторожен сanimationstart, потому что, если анимация начинается при загрузке страницы, ваш код JavaScript всегда выполняется после обработки CSS, поэтому анимация уже запущена, и вы не можете перехватить событие.

const container = document.querySelector('.container')
container.addEventListener(
  'animationstart',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationend',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationiteration',
  (e) => {
    //do something
  },
  false
)

Какие свойства можно анимировать с помощью анимации CSS

Много! Это то же самое, что вы можете анимировать с помощью переходов CSS.

Вот полный список:

Свойство
фон
фоновый цвет
background-position
размер фона
граница
цвет границы
ширина рамки
нижняя граница
граница нижнего цвета
граница-нижний-левый-радиус
граница-нижний-правый-радиус
ширина нижней границы
граница слева
граница-левый-цвет
граница-левая-ширина
border-radius
граница справа
граница-правый-цвет
граница-правая-ширина
пограничный интервал
бордюр
цвет верхней границы
граница-верх-левый-радиус
граница-верх-правый-радиус
ширина верхней границы
Нижний
тень коробки
цвет каретки
зажим
цвет
счетчик столбцов
колонна-пробел
столбец-правило
столбец-правило-цвет
ширина правила столбца
ширина колонки
столбцы
содержание
фильтр
сгибать
гибкая основа
гибкий рост
гибко-усадочный
шрифт
размер шрифта
размер шрифта настроить
font-stretch
font-weight
сетка
сетка-автоматические столбцы
сетка-автопоток
сетка-автоматические строки
конец столбца сетки
сетка-столбец-зазор
сетка-столбец-начало
сетка-столбец
сетка
конец строки сетки
сетка-ряд-промежуток
сетка-строка-начало
сетка
сетка-шаблон-области
сетка-шаблон-столбцы
сетка-шаблон-строки
сетка-шаблон
сетка
высота
оставили
Межбуквенное расстояние
высота линии
поле
нижняя граница
маржа слева
край справа
верхняя граница
максимальная высота
Максимальная ширина
мин-высота
минимальная ширина
непрозрачность
порядок
контур
контур-цвет
контур-смещение
контур-ширина
набивка
обивка-дно
отступ слева
отступ справа
обивка
перспектива
перспектива происхождения
цитаты
верно
размер табуляции
текст-украшение
текст-украшение-цвет
отступ текста
текстовая тень
верх
преобразовать.
вертикальное выравнивание
видимость
ширина
межсловный интервал
z-индекс

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: