Углубленные CSS-анимации

внешний интерфейс JavaScript CSS
Углубленные CSS-анимации

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

Введение и синтаксис CSS-анимации

Во-первых, давайте кратко представим анимацию CSS.

Последняя версия анимации CSS указана --CSS Animations Level 1определение.

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

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

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

div {
    animation: change 3s;
}

@keyframes change {
    0% {
        color: #f00;
    }
    100% {
        color: #000;
    }
}
  1. animation: move 1sЧасть является первой частью анимации и используется для описания различных правил анимации;
  2. @keyframes move {}Часть является второй частью анимации и используется для указания ключевых кадров стилей начала, конца и середины анимации;

Анимация CSS должна состоять из двух вышеуказанных частей.

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

Далее давайте кратко рассмотрим синтаксис анимации CSS.

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

Подсвойства анимации:

  • имя-анимации: указывает имя ключевого кадра, описанное @keyframes.
  • анимация-длительность: Установите продолжительность одного цикла анимации.
  • анимация-задержка: установите задержку, то есть время с момента загрузки элемента до начала выполнения последовательности анимации.
  • анимация-направление: установите, будет ли анимация выполняться в обратном порядке или возвращаться в исходное положение после каждого запуска.
  • анимация-итерация-счетчик: установите количество повторений анимации, вы можете указать бесконечность, чтобы повторять анимацию бесконечно.
  • animation-play-state: позволяет приостанавливать и возобновлять анимацию.
  • анимация-время-функция: установите скорость анимации, то есть, установив кривую ускорения, установите, как анимация изменяется между ключевыми кадрами.
  • animation-fill-mode: указывает, как применять стили к целевому элементу до и после выполнения анимации.
  • Правила @keyframes, конечно, если анимация хочет работать, она также должна включать правила @keyframes, которые устанавливают ключевые кадры анимации внутри.

Среди них для анимации:

  • Необходимый:animation-name,animation-durationа также@keyframesправило
  • необязательный:animation-delay,animation-direction,animation-iteration-count,animation-play-state,animation-timing-function,animation-fill-mode, конечно не сказать, что они не важны, но все они имеют значения по умолчанию, когда не установлены

Простой DEMO был приведен выше, просто используйте приведенный выше DEMO и посмотрите результат:

Это самая основная анимация CSS.Эта статья начнется с каждого подсвойства анимации и исследует все аспекты анимации CSS.

Имя анимации / продолжительность анимации Подробное объяснение

В общем, синглanimation-nameа такжеanimation-durationНе слишком много трюков, очень легко понять, собрать вместе.

Сначала позвольте мне представитьanimation-name,пройти черезanimation-name, механизм CSS найдет соответствующее правило @keyframes.

Конечно, это то же самое, что и именование правил CSS, и здесь также есть несколько хитрых операций. Например, он поддерживает выражения эмодзи, поэтому в кодеanimation-nameИмена также можно записать так:

div {
    animation: 😄 3s;
}

@keyframes 😄 {
    0% {
        color: #f00;
    }
    100% {
        color: #000;
    }
}

а такжеanimation-durationУстановите продолжительность цикла анимации.В приведенном выше DEMO необходимо установить общую продолжительность анимации.3s, это тоже очень понятно.

Подробное объяснение задержки анимации

animation-delayЧто интереснее, он может задавать задержку анимации, то есть время с момента загрузки элемента до начала выполнения последовательности анимации.

Простая демонстрация:

<div></div>
<div></div>

div {
    width: 100px;
    height: 100px;
    background: #000;
    animation-name: move;
    animation-duration: 2s;
}

div:nth-child(2) {
    animation-delay: 1s;
}
@keyframes move {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(200px);
    }
}

Сравните следующие две анимации, одна добавляетanimation-delay, один без, довольно интуитивно понятен:

Второй div выше, оanimationсвойство, которое также может быть сокращено какanimation: move 2s 1s, первое значение времени представляет продолжительность, а второе значение времени представляет время задержки.

анимация-задержка может быть отрицательной

оanimation-delay, самый интересный трюк в том, что он может быть отрицательным. То есть, несмотря на то, что имя свойствавремя задержки анимации, но с отрицательными числами анимация можетпродвигать.

Предположим, мы хотим реализовать такой эффект анимации загрузки:

Есть несколько идей:

  1. Положение первоначальных 3 шаров находится на расстоянии 120° друг от друга, и вращение начинается одновременно, но объем кода будет немного больше.
  2. Другой способ мышления, та же анимация, два из 3-х элементов задерживают 1/3 всей анимации, 2/3 времени запуска

Основной псевдокод схемы 2 выглядит следующим образом:

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}
.item:nth-child(2) {
    animation: rotate 3s infinite 1s linear;
}
.item:nth-child(3) {
    animation: rotate 3s infinite 2s linear;
}

Однако в первые 2 секунды анимации два других элемента не будут двигаться, и только после 2 секунд вся анимация будет такой, какой мы хотим:

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

.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}
.item:nth-child(2) {
    animation: rotate 3s infinite -1s linear;
}
.item:nth-child(3) {
    animation: rotate 3s infinite -2s linear;
}

Таким образом, каждому элементу не нужно ждать, он находится в прямом движении, а расстояние между элементами — это тот результат, который нам нужен:

Создавайте случайные эффекты с продолжительностью анимации и задержкой анимации.

Также есть интересная маленькая хитрость.

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

Я использую эту технику в следующих двух чисто CSS-анимациях:

  1. Pure CSS реализует анимацию зарядки Huawei:

纯 CSS 实现华为充电动画

  1. Чистый CSS для анимации пламени:

纯 CSS 实现火焰动画

кPure CSS реализует анимацию зарядки HuaweiВ качестве примера кратко объясните.

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

Давайте смоделируем, если мы используем 10animation-durationа такжеanimation-delayЕсли все круги совпадают, основной псевдокод:

<ul>
    <li></li>
    <!--共 10 个...--> 
    <li></li>
</ul>

ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}
li {
    background: #000;
    animation: move 3s infinite 1s linear;
}
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -100px);
    }
}

Таким образом, движение мяча будет равномерным:

Чтобы движение мяча выглядело очень случайным, просто позвольтеanimation-durationа такжеanimation-delayВсе можно плавать в пределах определенного диапазона, а CSS можно изменить:

@for $i from 1 to 11 {
    li:nth-child(#{$i}) {
        animation-duration: #{random(2000)/1000 + 2}s;
        animation-delay: #{random(1000)/1000 + 1}s;
    }
}

Мы используем циклы SASS иrandom()функция, пустьanimation-durationСлучайно в диапазоне 2-4 секунд, пустьanimation-delayСлучайный в диапазоне 1-2 секунд, таким образом, мы можем получить очень естественные и разные эффекты восходящей анимации, в основном не будет повторяющихся картинок, а случайный эффект хорошо моделируется:

Демонстрация CodePen -- эффект случайной анимации с произвольной продолжительностью анимации и задержкой анимации

функция ослабления анимации-времени-функции

Функция easing очень важна в анимации, она определяет ритм выполнения анимации в каждом анимационном цикле.

Ослабление в основном делится на две категории:

  1. кубическая-безье-тайминг-функция кубическая функция ослабления кривой Безье
  2. step-timing-function функция плавности шага (этот перевод мой собственный перевод, он может быть немного странным)

Кубическая функция сглаживания Безье

первый взгляд наКубическая функция сглаживания Безье. В CSS поддерживаются некоторые ключевые слова функции плавности.

/* Keyword values */
animation-timing-function: ease;  // 动画以低速开始，然后加快，在结束前变慢
animation-timing-function: ease-in;  // 动画以低速开始
animation-timing-function: ease-out; // 动画以低速结束
animation-timing-function: ease-in-out; // 动画以低速开始和结束
animation-timing-function: linear; // 匀速，动画从头到尾的速度是相同的

О сравнении эффекта между ними:

В дополнение к этим 5 ключевым словам, поддерживаемым CSS, мы также можем использоватьcubic-bezier()Метод настраивает кубическую кривую Безье:

animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

Вот очень полезный сайт -cubic-bezierИспользуется для создания и отладки различных параметров кривой Безье.

Влияние кубического замедления Безье на анимацию

Вот очень хороший пример влияния функций плавности на анимацию. Здесь мы используем чистый CSS для достижения эффекта часов, для движения анимации в нем, если он естьanimation-timing-function: linear, эффект следующий:

b

И если мы заменим функцию смягчения, она станетanimation-timing-function: cubic-bezier(1,-0.21,.85,1.29), его кривая соответствует следующему:

Эффект ритма анимации всех часов станет таким, совершенно другое ощущение:

Демонстрация CodePen — смягчение с различными эффектами

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

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

Функция пошагового смягчения

Далее поговорим о функции плавности шага. в CSSanimation-timing-function, имеет следующие проявления:

{
    /* Keyword values */
    animation-timing-function: step-start;
    animation-timing-function: step-end;

    /* Function values */
    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}

В CSS наиболее часто используемая функция пошагового замедления — это использование ее для достижения покадровой анимации. Предположим, у нас есть такая картинка (размер картинки1536 x 256, картинка из интернета):

Можно узнать, что это на самом деле 6 состояний во время прохождения персонажа, а может быть и 6 кадров, мы используемanimation-timing-function: steps(6)Его можно связать вместе с анимацией CSS, код очень простой:

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

.box {
  width: 256px;
  height: 256px;
  background: url('https://github.com/iamalperen/playground/blob/main/SpriteSheetAnimation/sprite.png?raw=true');
  animation: sprite .6s steps(6, end) infinite;
}
@keyframes sprite {
  0% { 
    background-position: 0 0;
  }
  100% { 
    background-position: -1536px 0;
  }
}

Кратко объясните приведенный выше код, в первую очередь нужно знать, просто256 x 6 = 1536, поэтому изображение выше можно разделить на 6 сегментов:

  1. Мы устанавливаем размер256pxdiv, который присваиваетanimation: sprite .6s steps(6) infiniteанимация;
  2. вsteps(6)Смысл в том, чтобы разделить заданную анимацию @keyframes на 6 раз (6 кадров) для выполнения, а общее время анимации равно0.6s, поэтому время паузы каждого кадра равно0.1s;
  3. Анимационный эффект создаетсяbackground-position: 0 0прибытьbackground-position: -1536px 0, так как приведенный выше код CSS не устанавливаетbackground-repeat, Так что на самом делеbackground-position: 0 0эквивалентноbackground-position: -1536px 0, то есть за весь процесс анимации картинка продвигается на один виток, но каждый кадр останавливается в характерном месте, всего 6 кадров;

Нарисуйте вышеуказанные шаги 1, 2, 3 и 3 на схеме для простой иллюстрации:

Как видно из приведенного выше рисунка, на самом деле в процессе анимацииbackground-positionЗначение на самом деле толькоbackground-position: 0 0,background-position: -256px 0,background-position: -512px 0и так далее, покаbackground-position: -1536px 0, из-за повторяющегося характера фона он фактически просто возвращается к исходному состоянию, таким образом, начиная новый раунд той же анимации.

Итак, вся анимация будет такой, каждый кадр остается на 0,1 с, а затем переключается на следующий кадр (обратите внимание, что это анимация с бесконечным циклом):

Вы можете нажать здесь для получения полного кода --CodePen Demo -- Sprite Animation with steps()

animation-duration Влияние длины анимации на анимацию

Вставьте небольшую главу здесь,animation-durationВлияние длины анимации на анимацию также очень очевидно.

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

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

Посмотрите на эффект, установите разныеanimation-duration(здесь 0,6 с -> 0,2 с), запись экрана GIF потеряла некоторые ключевые кадры, фактический эффект будет лучше:

Конечно, вsteps()в иsteps(6, start)а такжеsteps(6, end)разница, то есть где ключевое словоstartа такжеendразница. Для приведенной выше бесконечной анимации это в основном незначительно.Он в основном контролирует начало и продолжительность первого кадра анимации.Это относительно небольшая точка знаний, но для ее объяснения требуется много времени, и она ограничена Содержание этой статьи, которое здесь не раскрывается, читатель может понять сам.

Сравнение анимации движения и интерпретации покадровой анимации одного и того же эффекта анимации

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

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

Предположим, мы реализуем такое график с CSS:

Теперь я хочу использовать эту графику для создания эффекта загрузки.Если я использую анимацию движения, то есть кубическую кривую Безье с ослаблением, и позволяю ей вращаться, эффект будет очень общим:

.g-container{
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

Эффект анимации следующий:

Но если здесь мы заменим tween-анимацию на покадровую анимацию, потому что там 20 точек, поэтому установите ее в steps(20), а потом посмотрите на эффект, вы получите совсем другое ощущение:

.g-container{
    animation: rotate 2s steps(20) infinite;
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

Эффект анимации следующий:

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

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

Полный код для вышеуказанного эффекта DEMO:CodePen Demo -- Scale Loading steps vs linear

animation-play-state

Далее поговорим оanimation-play-state, как следует из названия, он управляет состоянием анимации — выполняется или приостановлено. Аналогично запуску и паузе видеоплеера. Это одно из ограниченных средств управления состоянием анимации в анимации CSS.

Имеет всего два значения (по умолчанию работает):

{
    animation-play-state: paused | running;
}

Он также очень прост в использовании, взгляните на следующий пример, когда мы наводим кнопку, мы можем приостановить анимацию:

<div class="btn stop">stop</div>
<div class="animation"></div>

.animation {
    width: 100px;
    height: 100px;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

@keyframes move {
    100% {
        transform: translate(100px, 0);
    }
}

.stop:hover ~ .animation {
    animation-play-state: paused;
}

Простая анимация CSS, но когда мы наводим кнопку, добавляемanimation-play-state: paused:

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

Обычно используйте его в соответствии с нормальным мышлениемanimation-play-state: pausedочень просто.

Однако, если мы хотим создать интересную анимацию CSS, мы могли бы сделать и наоборот.

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

Посмотрите пример наливания вина, это чисто CSS анимация, но по умолчанию анимация вanimation-play-state: paused, то есть состояние паузы, которое устанавливается только при нажатии мышкой на чашкуanimation-play-state: running, пусть вино падает, используйтеanimation-play-stateДостигается очень интересный интерактивный эффект:

Вы можете нажать здесь для полной ДЕМО:CodePen Demo -- CSS Beer!

Мы можем видеть эту технику во многих творческих интерактивных анимациях в Интернете.

  1. После рендеринга страницы без каких-либо операций анимация не запустится. только когда мышь находится над элементомclick, вызывая элемент:activeПсевдоклассовые эффекты времени, дающие анимациюanimation-play-state: running, начинается анимация;
  2. Когда анимация прогрессирует до любого момента, мышь перестает щелкать и псевдокласс исчезает, анимация останавливается;

animation-fill-mode контролирует состояние элемента на различных этапах

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

Взгляните на его значение:

{
    // 默认值，当动画未执行时，动画将不会将任何样式应用于目标，而是使用赋予给该元素的 CSS 规则来显示该元素的状态
    animation-fill-mode: none;
    // 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在 `animation-delay` 期间保留此值，
    animation-fill-mode: backwards; 
    // 目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于 `animation-direction` 和 `animation-iteration-count`
    animation-fill-mode: forwards;    
    // 动画将遵循 `forwards` 和 `backwards` 的规则，从而在两个方向上扩展动画属性
    animation-fill-mode: both; 
}

дляanimation-fill-mode, в разделе «Вопросы и ответы» о сбое сегмента (SF — Как понять режим анимации-заполнения) видел 4 очень хорошие диаграммы интерпретации, позаимствовать их здесь:

Предположим, что HTML выглядит следующим образом:

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

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

.box{
    transform: translateY(0);
}
.box.on{
    animation: move 1s;
}

@keyframes move{
    from{transform: translateY(-50px)}
    to  {transform: translateY( 50px)}
}

Используйте картинки для представленияtranslateYзначение свремяОтношение:

  • Горизонтальная ось представляетвремя, когда он равен 0, это означает время, когда начинается анимация, то есть время, когда в поле добавляется имя класса on, а одна сетка на горизонтальной оси означает 0,5 с.
  • вертикальная осьtranslateYЗначение , когда 0 означаетtranslateYЗначение равно 0, а вертикальная ось представляет собой одну сетку.50px
  1. animation-fill-mode: noneПроизводительность представлена ​​на рисунке:

Подводя итог в одном предложении, вне времени анимации стиль элемента ограничен только его правилами CSS и не имеет ничего общего с определением ключевого кадра в @keyframes.

  1. animation-fill-mode: backwardsПроизводительность представлена ​​на рисунке:

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

  1. animation-fill-mode: forwardsПроизводительность представлена ​​на рисунке:

Резюме предложения, элемент задается стилем анимации в соответствии с набором правил CSS, а стиль после окончания анимации характеризуется расчетным значением (которое останавливается на последнем кадре) по последнему ключевому кадру из-за выполнение.

  1. animation-fill-mode: bothПроизводительность представлена ​​на рисунке:

в одном предложенииanimation-fill-mode: backwardsа такжеanimation-fill-mode: forwardsнастройки. Стиль перед запуском анимации — это первый кадр, когда анимация выполняется, и останавливается на последнем кадре после окончания анимации.

animation-iteration-count/animation-direction количество итераций анимации и направление

говорил оanimation-fill-mode, между прочим, мы можем поговорить об этих двух хорошо понятных свойствах --animation-iteration-countа такжеanimation-direction

  • animation-iteration-countУправляет количеством запусков анимации, может быть числом или числом.infinite, обратите внимание, что числа могут быть десятичными
  • animation-directionУправляйте направлением анимации, вперед, назад, попеременно вперед и попеременно назад

скажи вышеanimation-fill-modeкогда я использовалПервый кадр при запуске анимацииЗаменяет оператор первого кадра, определенный в @keyframes, поскольку фактическое состояние первого и последнего кадров анимации также зависит от направления анимации.animation-directionа такжеanimation-iteration-countВлияние.

В анимации CSS,animation-iteration-countа такжеanimation-directionВместе они определяют состояние первого и последнего кадра во время выполнения анимации.

  1. Первый кадр анимации запускаетсяanimation-directionПринимать решение
  2. Последний кадр анимации запускаетсяanimation-iteration-countа такжеanimation-directionПринимать решение

Последний кадр анимации, который является окончательным состоянием анимации, и мы можем использоватьanimation-fill-mode: forwardsПусть анимация останется на этом кадре после окончания, это относительно легко понять, ноanimation-fill-mode: backwardsа такжеanimation-directionОтношения легко понять, вот краткое объяснение.

установить один100px x 100pxползунок, в400px x 100px, код выглядит следующим образом:

<div class="g-father">
    <div class="g-box"></div>
</div>

.g-father {
    width: 400px;
    height: 100px;
    border: 1px solid #000;
}
.g-box {
    width: 100px;
    height: 100px;
    background: #333;
}

Производительность выглядит следующим образом:

тогда присоединяйтесьanimationПосле этого в разныхanimation-iteration-countа такжеanimation-directionПри действии начальное и конечное состояния анимации различны.

если установленоanimation-fill-mode: backwards, состояние элемента до начала анимации определяется выражениемanimation-directionПринимать решение:

.g-box {
    ...
    animation: move 4s linear;
    animation-play-state: paused;
    transform: translate(0, 0);
}
@keyframes move {
    0% {
        transform: translate(100px, 0);
    }
    100% {
        transform: translate(300px, 0);
    }
}

Обратите внимание, что в этом правиле CSS для элемента не задано смещение.transform: translate(0, 0), в то время как в анимации первый ключевой кадр и последний ключ translateX100px,300px, с разнымanimation-directionИсходное состояние следующее.

На следующем рисунке предполагается, что мы установили паузу анимации по умолчанию —animation-play-state: paused, то состояние анимации до ее запуска:

Разделяй и властвуй анимация

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

Посмотрите эту анимацию:

<div></div>

div {
    width: 100px;
    height: 100px;
    background: #000;
    animation: combine 2s;
}
@keyframes combine {
    100% {
        transform: translate(0, 150px);
        opacity: 0;
    }
}

Здесь мы реализуем анимацию перетаскивания блока Div, и перетаскивание изменяется для изменения прозрачности:

Для такой анимации нескольких изменений свойств это фактически эквивалентно:

div {
    animation: falldown 2s, fadeIn 2s;
}

@keyframes falldown {
    100% {
        transform: translate(0, 150px);
    }
}
@keyframes fadeIn {
    100% {
        opacity: 0;
    }
}

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

настройки правил ключевых кадров

Мы часто можем видеть следующие два типа CSS в различных кодах CSS.@keyframesнастройки:

  1. использовать процент
@keyframes fadeIn {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
  1. использоватьfromа такжеto 
@keyframes fadeIn {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

Анимация в CSS@keyframesВ определении ,fromЭквивалентно0%,а такжеtoЭквивалентно100%.

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

Кроме того, когда начальный кадр анимации равен значению, указанному в правиле CSS, и не заданanimation-fill-mode,0%а такжеfromЭтот кадр можно удалить.

Высокий приоритет состояния анимации

Я был в этой статье -Глубокое понимание каскадирования в CSS (каскадные таблицы стилей).Говорил о очень интересном явлении CSS.

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

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

Итак, каков каскадный порядок?

Согласно последнему стандарту CSS Cascading 4:

CSS Cascading and Inheritance Level 5(Current Work)

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

  • Normal user agent declarations
  • Normal user declarations
  • Normal author declarations
  • Animation declarations
  • Important author declarations
  • Important user declarations
  • Important user agent declarations
  • Transition declarations

Просто переведите:

По приведенному выше алгоритму, наверное, так:

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

Однако после тестирования с несколькими браузерами это на самом деле не так. (смущенный)

Например, мы можем использовать эту функцию, чтобы переопределить встроенный стиль!importantстиль:

<p class="txt" style="color:red!important">123456789</p>

.txt {
    animation: colorGreen 2s infinite;
}
@keyframes colorGreen {
    0%,
    100% {
        color: green;
    }
}

В браузере Safari цвет приведенного выше DEMO-текстазеленый, то есть стиль в состоянии анимации может переопределить встроенный стиль!importantстиль, который относится к стилю с наивысшим приоритетом, мы можем передать бесконечную анимацию, илиanimation-fill-mode: forwards, используйте этот трюк, чтобы переопределить встроенный стиль, который должен иметь очень-очень высокий приоритет!importantстиль.

Я могу получить тот же результат в Chrome два года назад, но на сегодняшний день (2022-01-10) последняя версия Chrome больше не поддерживает приоритет стиля ключевого кадра, переопределяющий встроенный стиль во время анимации.!importantхарактеристики.

Для разных браузеров заинтересованные учащиеся могут использовать мою DEMO, чтобы попробовать самостоятельно.CodePen Demo - the priority of CSS Animation

Оптимизация анимации CSS

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

Моя анимация CSS зависла, как ее оптимизировать?

Анимированные элементы генерируют отдельный GraphicsLayer, вызывая запуск GPU-ускорения.

CSS-анимация очень застряла, на самом деле это описание явления, ее суть на самом деле в процессе анимации,Обновить вашу страницу браузера, рендеринг кадров слишком низкой. Вообще говоря, большинство браузеров в настоящее время имеют частоту обновления 60 раз в секунду, поэтому эффект анимации лучше, когда FPS составляет 60 кадров в секунду, то есть время потребления на кадр составляет 16,67 мс.

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

Причина низкой частоты кадров заключается в том, что браузер обрабатывает слишком много вещей в одном кадре, превышающем 16,67 мс.Чтобы оптимизировать время каждого кадра, необходимо полностью знать, что браузер делает в каждом кадре.Это снова включает старый модная страница рендеринга браузера.

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

Упрощенно это изображение:

Вы можете увидеть эти две фотографии во многих различных статьях.

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

Среди них, как уменьшить перекомпоновку и перерисовку страницы, здесь мы будем использовать **ускорение графического процессора**, о котором мы часто говорим.

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

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

В Chrome есть разные типы слоев: RenderLayer (отвечает за поддерево DOM), GraphicsLayer (отвечает за поддерево RenderLayer).

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

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

Таким образом, первое практическое правило оптимизации CSS-анимации (и веб-анимации) таково:Позвольте элементам, которым нужна анимация, генерировать свой собственный независимый GraphicsLayer, вызывая запуск ускорения графического процессора., и нам нужно знать, что суть GPU-ускорения заключается в использовании элемента для генерации собственного независимого GraphicsLayer, что снижает накладные расходы на перерисовку и перекомпоновку страницы в процессе рендеринга.

Конечно, генерируют свой собственный независимый графический лайн, а не просто Transform3D API, есть много способов. Для приведенного выше содержания вокруг очень большого сегмента вы можете посмотреть эти статьи:

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

Уменьшите стиль производительности потребления

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

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

Подобно 3D-преобразованиям CSS,mix-blend-mode,filter, эти стили требуют больше производительности, чем другие простые операции. Мы должны попытаться уменьшить частоту его использования или найти альтернативу в процессе анимации, насколько это возможно.

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

Таким образом, ключ в том, что нам нужно использовать инструменты разработки, чтобы определить узкое место производительности для каждого случая зависания, а затем попытаться уменьшить нагрузку на браузер. Очень важно изучить панель «Производительность» Chrome DevTools и другие панели, связанные с рендерингом, конечно, это не является предметом этой статьи. Вы можете исследовать самостоятельно.

Используйте will-change, чтобы улучшить производительность рендеринга для прокрутки страницы, анимации и т. д.

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

Стоит отметить, что хорошо использовать это свойство не очень просто:

  • Не делайтеwill-changeПрименение к слишком большому количеству элементов: браузеры изо всех сил старались оптимизировать все, что можно было оптимизировать. Есть несколько более мощных оптимизаций, которые в сочетании с will-change могут потреблять много машинных ресурсов, а при чрезмерном использовании могут привести к медленному отклику страницы или потреблению большого количества ресурсов.

  • Используйте экономно: часто, когда элемент восстанавливается до исходного состояния, браузер отбрасывает все оптимизации, которые он делал раньше. Но если вы явно объявите это прямо в таблице стилейwill-changeатрибут, это означает, что целевой элемент может часто меняться, и браузер будет сохранять работу по оптимизации дольше, чем раньше. Поэтому лучше всего переключаться между изменениями до и после изменения элемента с помощью скрипта.will-changeценность .

  • Не применять преждевременноwill-changeОптимизация: если у вашей страницы нет проблем с производительностью, не добавляйтеwill-changeатрибуты, чтобы выжать немного скорости.will-changeПервоначально он был разработан как последнее средство для решения существующих проблем с производительностью. Его не следует использовать для предотвращения проблем с производительностью. чрезмерное использованиеwill-changeЭто приведет к большому объему памяти и усложнит процесс рендеринга, поскольку браузер пытается подготовиться к возможным изменениям. Это может привести к более серьезным проблемам с производительностью.

  • Дайте ему достаточно времени для работы: это свойство используется разработчиком страницы, чтобы сообщить браузеру, какие свойства могут измениться. Затем браузер может заранее выполнить некоторую работу по оптимизации, прежде чем произойдет изменение. Поэтому важно дать браузеру некоторое время, чтобы выполнить эти оптимизации. При его использовании нужно постараться найти какие-то способы заранее узнать о возможных изменениях элемента, а затем добавить егоwill-changeАтрибуты.

кто-то сказалwill-changeЭто хорошее лекарство, и некоторые люди говорят, что это яд.При его использовании вы можете испытать его больше.

наконец

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

Хорошо, это конец этой статьи, я надеюсь, что эта статья будет вам полезна :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

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

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории