CSS анимация: анимация, переход, трансформация, перевод тупо неразличимы

внешний интерфейс JavaScript анимация CSS

Эта статья впервые появилась в моем блоге:Vince's Blog

предисловие

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

Несколько свойств css, которые легко спутать

Есть много свойств CSS, и некоторые из них легко спутать, будь то написание букв или буквальное значение.Например, свойства, которые я перечислил, запутали и вас~

Атрибуты имея в виду
анимация Используется для установки свойств анимации, это сокращенное свойство, которое содержит 6 свойств.
переход Слишком стильный для элементов стиля, имеет эффект, аналогичный анимации, но с очень разными деталями.
трансформировать Он используется для поворота, масштабирования, перемещения или наклона элемента и не имеет ничего общего с анимацией, задающей стиль, он эквивалентен цвету, используемому для задания «внешнего вида» элемента.
переводить (двигать) translate - это просто значение атрибута преобразования, то есть перемещения.

После разъяснения этих вопросов мы можем выучить анимацию CSS в состоянии четкого голоса

transition

Что такое переход? Буквально это означает, что элемент переходит от определенного значения (красного) этого атрибута (цвета) к другому значению (зеленому) этого атрибута (цвета), что является переходом состояния и требует условия для его запуска. как :hoever, :focus, :checked, медиа-запросы или JavaScript, которые мы обычно используем.

Давайте начнем с простой демонстрации, чтобы увидеть эффект перехода

<!DOCTYPE html>
<html lang="en">
<head>
  <title>transition</title>
  <style>
    #box {
      height: 100px;
      width: 100px;
      background: green;
      transition: transform 1s ease-in 1s;
    }

    #box:hover {
      transform: rotate(180deg) scale(.5, .5);
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>

Эффект:

image

Давайте проанализируем весь этот процесс. Во-первых, атрибут перехода, установленный для элемента, — это Преобразование. Когда мышь перемещается в элемент, Преобразование элемента изменяется, затем срабатывает ПЕРЕХОД, производя анимацию, когда мышь удаляется, Преобразование Изменяется, на этот раз по-прежнему будет запускаться переход, генерируя анимацию, поэтому условие перехода генерирует свойство настроек перехода, эта анимация характеризуется «движущей силой запуска», недостатков немного:

  1. Требуется запуск события, поэтому это не может произойти автоматически при загрузке страницы.
  2. является одноразовым и не может быть повторен, если не срабатывает повторно
  3. Можно определить только начальное состояние и конечное состояние, а промежуточное состояние определить нельзя, то есть есть только два состояния.
  4. Правило перехода может определять изменение только одного атрибута и не может включать несколько атрибутов.

грамматика:transition: property duration timing-function delay;

стоимость описывать
transition-property Назовите предписанный набор эффектов перехода свойств CSS.
transition-duration Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода.
transition-timing-function Кривая скорости, определяющая эффект скорости
transition-delay Определите, когда начинается эффект перехода

animation

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

<!DOCTYPE html>
<html lang="en">

<head>
  <title>animation</title>
  <style>
    .box {
      height: 100px;
      width: 100px;
      border: 15px solid black;
      animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
    }

    .box:hover {
      animation-play-state: paused;
    }

    @keyframes changebox {
      10% {
        background: red;
      }
      50% {
        width: 80px;
      }
      70% {
        border: 15px solid yellow;
      }
      100% {
        width: 180px;
        height: 180px;
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

image

анализировать:

Давайте сначала посмотрим на ключевой момент ключевых кадров, который определяет комбинацию анимации, называемую полем изменений, где 10%, 50%, 70% и 100% представляют значения атрибута в разные моменты времени изменения.Например, общее время этой анимации составляет 1 с, затем 10% - это анимация в 0-0,1 с.Благодаря этому мы можем более точно контролировать эффект свойства любого момента времени в изменении анимации, что значительно улучшает наш контроль над анимацией. Это для сложных анимаций. В принципе, давайте вернемся и посмотрим на полные восемь значений в анимации. Это немного преувеличено? Я не видел такого длинного значения. Контролируя каждое значение анимации, анимация элемент управления становится очень гибким. Давайте узнаем о его синтаксисе и о том, что представляет каждое значение:

грамматика:animation: name duration timing-function delay iteration-count direction play-state fill-mode;

стоимость описывать
name Используется для вызова анимации, определенной @keyframes, в соответствии с именем анимации, определенным @keyframes
duration Указывает, как долго элемент будет воспроизводить анимацию.
timing-function Кривая скорости, определяющая эффект скорости, представляет собой скорость преобразования для временного диапазона каждой небольшой анимации.
delay Определяет время ожидания до того, как браузер начнет выполнять анимацию, значение времени ожидания до выполнения всей анимации
iteration-count Определить количество воспроизведений анимации, необязательный конкретный раз или бесконечно (бесконечно)
direction Установите направление воспроизведения анимации: обычное (в порядке временной шкалы), реверсивное (бегут в направлении, противоположном временной шкале), альтернативное (по очереди, т. в обратном направлении, а затем в положительном направлении и продолжает работать попеременно)
play-state Управление состоянием воспроизведения анимации элемента, через которое можно управлять паузой и продолжением анимации, два значения: running (продолжить), paused (пауза)
fill-mode После окончания анимации управления стиль элемента имеет четыре значения: none (возврат в состояние, когда анимация не запускалась), forwards (анимация остается в конечном состоянии после завершения анимации), backwords (анимация возвращается в исходное состояние). состояние первого кадра), оба (прямые и обратные правила применяются по очереди в соответствии с направлением анимации), будьте осторожны, чтобы не конфликтовать со счетчиком итераций (анимация выполняется бесконечно)

Разница между анимацией и переходом заключается в том, что ключевые кадры обеспечивают больший контроль, особенно управление временной шкалой, что делает анимацию CSS более мощной, так что часть анимационного эффекта flash может напрямую контролироваться CSS, и все это занимает всего несколько секунд. Строка кода, и, следовательно, большое количество анимационных библиотек на основе CSS родилось для замены анимационной части flash. Обычно используется в моем проектеAnimate.cssДавайте настроим несколько анимаций и с нетерпением ждем возможности использовать анимацию для идеальной реализации дизайнерских рисунков, предоставленных дизайнерами пользовательского интерфейса на работе ~

Суммировать

Цель написания этой статьи - напомнить себе не путать эти четыре атрибута.Кстати, я подробно объясню, как делать анимацию с помощью CSS.Переходы рекомендуется использовать в простых одноразовых анимациях, которые более логичны. понятный и ремонтопригодный. Если вы столкнулись с более сложной анимацией, вы можете удалить анимацию, чтобы начать свое выступление в это время.На самом деле, вы можете не только использовать CSS для достижения анимации, но также использовать js для управления стилем элементов для достижения анимации. на этот раз вы имеете в виду setTimeout? , setInterval для управления стилем для достижения анимации, конечно, но по сравнению с новым requestAnimationFrame он может выполнять анимацию с более высокой производительностью Напишите подробное руководство.

В статье есть ошибки, прошу подсказать~

The Next Day is Always a New Day

Категории