CSS
Анимации

Синтаксис

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

параметры

Анимации с переходным свойством

Свойство CSS- transition полезное для простых анимаций, позволяет свойствам CSS на основе чисел анимироваться между состояниями.

пример

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

Просмотреть результат

По умолчанию, зависание над элементом с классом .Example немедленно приведет к тому, что высота элемента 120px на 120px а цвет фона - на красный ( #ff0000 ).

Добавляя свойство transition , мы можем вызвать эти изменения со временем:

.Example{
    ...
    transition: all 400ms ease;
}

Просмотреть результат

all значение применяет переход ко всем совместимым (основанным на цифрах) свойствам. Любое имя совместимого свойства (например, height или top ) можно заменить для этого ключевого слова.

400ms определяет количество времени, которое занимает переход. В этом случае изменение высоты элемента займет 400 миллисекунд.

Наконец, ease - это функция анимации, которая определяет, как воспроизводится анимация. ease означает начать медленно, ускорить, а затем снова замедлить. Другие значения являются linear , ease-out и ease-in .

Совместимость между браузерами

Свойство transition обычно хорошо поддерживается во всех основных браузерах, за исключением IE 9. Для более ранних версий браузеров Firefox и Webkit используйте префиксы поставщиков, например:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

Примечание. Свойство transition может анимировать изменения между любыми двумя численными значениями независимо от единицы. Он также может переходить между единицами, такими как 100px 50vh . Однако он не может переходить между числом и значением по умолчанию или автоматически, например, переходом высоты элемента с 100px на auto .

Увеличение производительности анимации Использование атрибута `will-change`

При создании анимаций и других тяжелых GPU-действиях важно понять атрибут will-change .

Оба ключевых кадра CSS и свойство transition используют ускорение GPU. Производительность повышается за счет выгрузки вычислений на графический процессор устройства. Это делается путем создания слоев краски (части страницы, которые отображаются отдельно), которые выгружаются на графический процессор для расчета. Свойство will-change сообщает браузеру, что будет анимировать, позволяя браузеру создавать небольшие области рисования, тем самым повышая производительность.

Свойство will-change принимает список свойств, которые будут анимированы. Например, если вы планируете преобразовать объект и изменить его непрозрачность, вы должны указать:

.Example{
    ...
    will-change: transform, opacity;
}

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

Анимации с ключевыми кадрами

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

Основной пример

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

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Просмотреть результат

Здесь есть несколько разных вещей. Во-первых, фактический синтаксис @keyframes .

@keyframes rainbow-background{

Это задает имя анимации для rainbow-background .

0%     { background-color: #ff0000; }

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

Анимация автоматически перейдет между ключевыми кадрами. Таким образом, установив следующий фоновый цвет на 8.333% , анимация плавно займет 8,333% времени для перехода между этими ключевыми кадрами.

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Этот код присоединяет нашу анимацию ко всем элементам, которые имеют класс .RainbowBackground .

Фактическое свойство анимации принимает следующие аргументы.

• animation-name : название нашей анимации. В этом случае rainbow-background
• Продолжительность анимации : сколько времени займет анимация, в данном случае 5 секунд.
• animation-iteration-count (Необязательно) : количество циклов анимации. В этом случае анимация будет продолжаться бесконечно. По умолчанию анимация будет воспроизводиться один раз.
• animation-delay (Необязательно) : указывает, как долго ждать анимацию. Значение по умолчанию равно 0 секундам и может принимать отрицательные значения. Например, -2s запустит анимацию на 2 секунды в свой цикл.
• Функция анимации-времени (необязательно) : задает кривую скорости анимации. По умолчанию он ease , когда анимация начинает медленно, быстрее и заканчивается медленнее.

В этом конкретном примере как 0% и 100% ключевые кадры определяют { background-color: #ff0000; } . Где бы два или более ключевых кадра не разделяли состояние, можно указать их в одном выражении. В этом случае две строки 0% и 100% могут быть заменены на одну строку:

0%, 100%     { background-color: #ff0000; }

Кросс-браузерная совместимость

Для более старых браузеров на основе WebKit вам необходимо использовать префикс поставщика как для объявления @keyframes и для свойства animation :

@-webkit-keyframes{}

-webkit-animation: ...

Примеры синтаксиса

Наш первый пример синтаксиса показывает свойство сокращения анимации, используя все доступные свойства / параметры:

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

Наш второй пример немного более прост и показывает, что некоторые свойства можно опустить:

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

Наш третий пример показывает минимальное объявление. Обратите внимание, что имя анимации и продолжительность анимации должны быть объявлены:

  animation: 3s         slidein;
  /*         duration | name */

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

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

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;