Анимация CSS3, о которой вы могли не знать

CSS

Через какое-то время я собираюсь помочь девочкам заняться компьютерным зрением, так что я буду изучать анимацию. Существует три способа создания анимации во внешнем интерфейсе, а именно:таймер, requestAnimationFrameтак же какCSS3 Animation, а появление requestAnimationFrame практически убивает таймер. Хотя анимация не может обрабатывать анимации, требующие сложных математических операций, таких как кубическое замедление, экспоненциальное затухание синусоидального замедления и т. д. (кажется, что CSS3 будет поддерживать тригонометрические функции), в большинстве случаев она все же может создавать очень хорошие анимационные эффекты. свойств анимации.

Список свойств

В настоящее время анимация имеет следующие 9 свойств, первое из которых является краткой формой следующих свойств.

Атрибуты описывать
animation Сокращение для следующих свойств (кроме animation-play-state)
animation-name Указывает имя анимации @keyframes
animation-duration Время, за которое анимация завершает один цикл, по умолчанию равно 0 с.
animation-timing-function «Ритм», в котором выполняется анимация, по умолчанию — легкость.
animation-delay Время задержки начала воспроизведения анимации, по умолчанию 0
animation-iteration-count Количество воспроизведений анимации, по умолчанию 1
animation-direction Указывает, будет ли анимация воспроизводиться в обратном порядке в следующем цикле.
animation-fill-mode Определяет режим заполнения анимации
animation-play-state Управляет анимацией для запуска или паузы, по умолчанию работает

animation-name

Это свойство используется для указания имени анимации @keyframes. Определение ключевых кадров требует использования@keyframesправило. может использоваться в операторах блока стиляfrom...toструктура, вы также можете использоватьпроцентопределять.

Как показано в следующем коде, он увеличивает элемент в 1,1 раза, когда начинается анимация, уменьшает элемент в 0,8 раза, когда анимация выполняется наполовину, и увеличивает элемент в 1,1 раза в конце анимации. может имитировать хороший эффект анимации сердцебиения.

.heart {
  animation: heartbeat cubic-bezier(0.2, 0.73, 0.71, 0.44) infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1.1);
  }
}

HEART BEAT

animation-duration

Это свойство определяет продолжительность цикла анимации.

  • Значение по умолчанию — 0 с, что означает отсутствие анимации.

  • Единицей измерения являются секунды или миллисекунды, никакое значение единицы не является недопустимым.

animation-timing-function

Это свойство используется для определения «темпа» анимации, значение по умолчанию — легкость.

значение атрибута описывать
ease медленно начинать, медленно заканчивать
ease-in сначала медленно потом быстро
ease-out сначала быстро потом медленно
ease-in-out Эффект перехода, который начинается и заканчивается медленно
linear гладкий эффект
step-start шаг, игнорировать первый кадр
step-end шаг, игнорировать последний кадр
step-middle Шаг, от первого кадра до последнего кадра

Будь то в анимации или переходе, первые 5 должны быть очень распространены, и мы можем просматривать изображение конкретной функции непосредственно в Chrome Dev (фактически, эти пять представляют собой несколько специальных форм кривых Безье).

Jietu20190404-000307@2x.jpg

step-start, step-end и step-middle представляют пошаговую анимацию.

Где step-start игнорирует первый кадр соответствующего правила @keyframs, step-end игнорирует последний кадр, step-middle начинается сПервый кадр шагает до последнего кадра.

См. следующий пример при использованииstep-start, начальное состояние элемента 1,2 раза (соответствует 25%), а выполнение шага за один такт 25% -> 50% -> 75% -> 100%

когда используешьstep-endПри начальное состояние элемента равно 1,1 раза (соответствует 0%), а выполнение шага за один такт равно 0% -> 25% -> 50% -> 75%

когда используешьstep-middle, начальное состояние элемента является начальным состоянием элемента, и шаг выполняется за один такт: 0% -> 25% -> 50% -> 75% -> 100%

@keyframes someEffect {
  0% {
    transform: scale(1.1);
  }
  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1.3);
  }

  75% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1.5);
  }
}

Кроме того, это свойство имеет три встроенные функции, а именно: cube-bezier(), steps() и frameworks().

Вот краткий разговор о ступенях (). Если вы использовали Twitter, вы должны знать, что это как эффект очень круто, вы можете увидеть картинку ниже. Этот эффект может быть полностью смоделирован с шагами (), и тому подобное модуль в моем блоге также имеет этот эффект, но он использует Box-Shadow, вы можете увидеть исходный кодLike Component

1_HJHfcRwn33XU4omMogi6PQ (1).gif

Сначала вам нужно скачать картинку ниже, вы можете видеть, что этоСтатус «Не нравится» -> «Создать фейерверк» -> «Фейерверки исчезают» -> «Мне нравится»Иллюстрация спрайта.

1_MTZW1G1mE7LSX1CnhTYeHA.png

При инициализации мы передаемbackground-position: leftа такжеbackground-size: 2900%Поместите исходный фон на первую серую иконку на изображении выше.

Затем мы создаем @keyframes для обхода изображения выше слева направо за один цикл анимации.

«Перескакивать» к следующему значку в каждом кадре, а не двигаться плавно. Мы используем функцию steps(), поскольку всего имеется 29 маленьких значков, из которых по умолчанию используется первый, поэтому передаем параметр 28.

При нажатии на фоновое изображениеis_animatingДобавьте в сердце элемент, чтобы добиться эффекта комплиментов.

<div class="heart"></div>

.heart {
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image: url('heart-locus.png');
  background-position: left;
  background-repeat: no-repeat;
  background-size: 2900%;
}

.is_animating {
  animation-name: heart-burst;
  animation-duration: 800ms;
  animation-timing-function: steps(28);
  animation-iteration-count: 1;
}

@keyframes heart-burst {
  from {
    background-position: left;
  }
  to {
    background-position: right;
  }
}

const heartDOM = document.querySelector('.heart');

heartDOM.addEventListener('click', function() {
  this.classList.toggle('is_animating');
});

heartDOM.addEventListener('animationend', function() {
  this.classList.toggle('is_animating');
});

animation-delay

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

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

Давайте посмотрим на следующий пример:

.cube {
  margin-bottom: 10px;
  width: 100px;
  height: 100px;
  background: #ccc;
  animation: colorChange 10s linear;
}

.has-delay {
  animation-delay: 2s;
}

.has-ng-delay {
  animation-delay: -2s;
}

@keyframes colorChange {
  20% {
    background-color: #f8e81c;
  }

  40% {
    background-color: #d0011b;
  }

  60% {
    background-color: #7ed321;
  }

  80% {
    background-color: #509ce3;
  }

  100% {
    background-color: #ccc;
  }
}

HTML-структура выглядит следующим образом:

<div class="cube"></div>
<div class="cube has-ng-delay"></div>
<div class="cube has-delay"></div>

В этом примере мы установили общую продолжительность анимации куба на 10 секунд, а начальный цвет — серый. Разница в том, что первый куб выполняется нормально, второй куб выполняется «с задержкой» на -2 с, а третий куб выполняется с задержкой в ​​2 с.

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

Это связано с тем, что анимации, определенные в @keyframes, должны выполняться в течение времени анимации. Когда задержка анимации положительна, анимация начнется с задержкой, время анимации еще не начало рассчитываться, положительная задержка не будет рассчитываться во время анимации, поэтому анимация, которую мы видим, начинается с первого кадра. Начато; когда анимация-задержка отрицательная, это означает, что анимация началась заранее, анимация-время уже начала рассчитываться, и отрицательная задержка засчитывается в анимацию-время, поэтому анимация, которую мы видим, начинается с начался определенный кадр.

xx

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

.loader-container {
  width: 210px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.cube {
  width: 100px;
  height: 100px;
  background: #ccc;
  animation: colorChange 5s linear infinite;
}

.delay-neg-1 {
  animation-delay: -1s;
}

.delay-neg-2 {
  animation-delay: -2s;
}

.delay-neg-3 {
  animation-delay: -3s;
}

.delay-neg-4 {
  animation-delay: -4s;
}

Ниже приведен HTML

<div class="loading-container">
  <div class="cube delay-neg-1"></div>
  <div class="cube delay-neg-2"></div>
  <div class="cube delay-neg-3"></div>
  <div class="cube delay-neg-4"></div>
</div>

a757cbe5b9bc4490ffd445175913401f.gif

animation-iteration-count

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

  • не может быть отрицательным

  • Бесконечный означает бесконечный цикл

  • Может быть десятичным числом, например 0,5 означает, что половина анимации закончится.

animation-direction

Это свойство указывает, воспроизводится ли анимация в обратном порядке, имеется 4 значения:

  • нормальный: выполнять от 0% до 100% @keyframes каждый раз и возвращаться к 0% сразу после окончания цикла

  • альтернатива: предположимanimation-iteration-count: infinite, выполнить от @keyframes от 0% до 100%, затем обратно до 0% из позиции 100%, снова и снова

  • реверс: выполнять от 100% до 0% @keyframes каждый раз и возвращаться к позиции 100% сразу после окончания цикла

  • альтернативный реверс: предположимanimation-iteration-count: infinite, от @keyframes 100 % до 0 %, затем обратно к 100 % от 0 % и т. д.

animation-fill-mode

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

  • none — значение по умолчанию, означающее, что после завершения анимации она вернется в исходное состояние.

  • forwards означает, что после завершения анимации стиль последнего кадра сохраняется в @keyframes.

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

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

animation-play-state

Это свойство используется для приостановки и запуска анимации. Есть два значения свойства: running и pause. Если установлено значение pause, анимация немедленно остановится в текущей позиции.положение остановкиПродолжить выполнение, не возвращаясь к исходной (или конечной точке) для повторного выполнения.

animation

Наконец, давайте поговорим о свойстве анимации, которое представляет собой сокращенную форму вышеупомянутых свойств. Свойство анимации еще не включено.animation-play-state, если вам нужно написать его отдельно, синтаксис следующий.

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

несколько анимаций

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

Ссылаться на

Анимация CSS3 на практике

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

Ознакомьтесь с подводными камнями отрицательных значений задержки анимации и положительных значений задержки на iOS.

Серия Front-end Talkking CSS — шаг за шагом, чтобы вы познакомились с анимационным эффектом анимации

Подробное введение в функцию шагов в свойстве анимации CSS3.

Резервные данные режима Animation-Fill вы не знаете

Категории