CSS-переходы и CSS-анимации

05.06.2021

Теги: CSS • HTML • JavaScript • Web-разработка • Верстка • Теория

CSS-переходы (transitions)

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

#block {
    width: 100px;
    height: 100px;
    background-color: green;
    /* изменение цвета фона будет анимироваться в течение трёх секунд */
    transition: background-color 3s;
}
#block:hover {
    background-color: red;
}

Для html-элемента нужно указать, какое css-свойство должно быть анимировано, и сколько времени займет переход из одного состояния в другое. А когда свойство меняется, браузер сам обработает это изменение и отрисует анимацию. 

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-переход</title>
    <style>
        #block {
            width: 100px;
            height: 100px;
            background-color: green;
            /* изменение цвета фона будет анимироваться в течение трёх секунд */
            transition: background-color 3s;
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            button.addEventListener('click', () => {
                block.style.backgroundColor = 'red';
            });
        });
    </script>
</head>
<body>
    <div id="block"></div>
    <button id="button">Изменить цвет</button>
</body>
</html>

Существует четыре свойства для описания CSS-переходов:

  • transition-property — свойство для анимации
  • transition-duration — продолжительность перехода
  • transition-timing-function — временная функция перехода
  • transition-delay — задержка начала перехода

В transition-property записывается список свойств, изменения которых необходимо анимировать. Анимировать можно не все свойства, но большинство из них. Значение свойства all означает «анимируй все свойства».

В transition-duration можно определить, сколько времени займёт анимация. Время должно быть задано в секундах s или миллисекундах ms.

Временная функция transition-timing-function описывает, как процесс анимации будет распределён во времени. Будет ли она начата медленно и затем ускорится или наоборот. Значение по умолчанию — ease.

В transition-delay можно определить задержку перед началом анимации. Например, если transition-delay: 1s, тогда анимация начнётся через 1 секунду после изменения свойства.

Свойство transition позволяет задать все одновременно в последовательности property, duration, timing-function, delay, а также анимировать несколько свойств одновременно. Пример анимации сразу двух свойств одновременно: 

#font-and-color {
    transition: font-size 3s, color 2s;
}

Событие transitionend

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

  • event.propertyName — имя свойства, анимация которого завершилась (полезно, если анимаций несколько)
  • event.elapsedTime — время в секундах, которое заняла анимация, без учёта transition-delay
<body>
    <div id="block"></div>
</body>
#block {
    width: 100px;
    height: 100px;
    background-color: green;
    /* изменение цвета фона будет анимироваться в течение трёх секунд */
    transition: background-color 3s;
}
window.addEventListener('DOMContentLoaded', () => {
    block.addEventListener('transitionend', () => {
        alert('Переход завершен');
    });
});

CSS-анимации (animations)

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

Пульсирующий зеленый круг, уменьшается и увеличивается бесконечно: 

#circle {
    background: green;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    animation: pulsing 2s infinite;
}

@keyframes pulsing {
    0% { /* ключевой кадр, начало */
        transform: scale(0.5, 0.5);
    }
    50% { /* ключевой кадр, середина */
        transform: scale(1.0, 1.0);
    }
    100% { /* ключевой кадр, конец */
        transform: scale(0.5, 0.5);
    }
}

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-анимация</title>
    <style>
        #block {
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0;
            top: 0;
            background-color: green;
            animation: moving 4s infinite;
        }
        @keyframes moving {
            0% { /* ключевой кадр, левый верхний угол */
                left: 0;
                top: 0;
            }
            25% { /* ключевой кадр, правый верхний угол */
                left: calc(100% - 100px);
                top: 0;
            }
            50% { /* ключевой кадр, правый нижний угол */
                left: calc(100% - 100px);
                top: calc(100% - 100px);
            }
            75% { /* ключевой кадр, левый нижний угол */
                left: 0;
                top: calc(100% - 100px);
            }
            100% { /* ключевой кадр, левый верхний угол */
                left: 0;
                top: 0;
            }
        }
    </style>
</head>
<body>
    <div id="block"></div>
</body>
</html>

Есть восемь свойств, которые позволяют контролировать CSS-анимацию:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

Свойство animation-name задаёт список анимаций, чтобы применить к элементу; каждое имя является правилом @keyframes.

Свойства animation-duration, animation-timing-function, animation-delay работают так же, как аналогичные свойства в CSS-переходе.

Свойство animation-iteration-count задаёт количество повторов анимации, значение по умолчанию равно единице. Значение infinite означает, что анимация будет проигрываться бесконечно.

Свойство animation-direction определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад. Значение по умолчанию — normal.

  • normal — анимация проигрывается только вперёд на каждой итерации
  • reverse — анимация проигрывается только назад на каждой итерации
  • alternate — анимация проигрывается вперед, а потом назад (вперед, назад, вперед, назад, …)
  • alternate-reverse — анимация проигрывается назад, а потом вперед (назад, вперед, назад, вперед, …)

Свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после её выполнения.

  • none — стили анимации не будут применены к элементу до и после её выполнения
  • forwards — по окончании анимации элемент сохранит стили последнего ключевого кадра
  • backwards — элемент сохранит стиль первого ключевого кадра на протяжении периода animation-delay
  • both — анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно

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

  • running — анимация проигрывается
  • paused — анимация поставлена на паузу

Свойство animation это короткая запись для animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode и animation-play-state. Порядок может быть любым, но рекомендуется использовать следующий: 

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

Если порядок отличается от рекомендованного, то первое значение, которое может быть проанализировано как time, будет присвоено animation-duration, а второе — назначено animation-delay.

Событие animationend

Это событие возникает, когда CSS-анимация достигает конца своего активного периода, который вычисляется как 

(animation-duration * animation-iteration-count) + animation-delay
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-анимация</title>
    <style>
        #block {
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0;
            top: 0;
            background-color: green;
            /* анимация проигрывается два раза */
            animation: moving 10s 2;
        }
        @keyframes moving {
            0% { /* ключевой кадр, левый верхний угол */
                left: 0;
                top: 0;
            }
            25% { /* ключевой кадр, правый верхний угол */
                left: calc(100% - 100px);
                top: 0;
            }
            50% { /* ключевой кадр, правый нижний угол */
                left: calc(100% - 100px);
                top: calc(100% - 100px);
            }
            75% { /* ключевой кадр, левый нижний угол */
                left: 0;
                top: calc(100% - 100px);
            }
            100% { /* ключевой кадр, левый верхний угол */
                left: 0;
                top: 0;
            }
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            block.addEventListener('animationstart', () => {
                alert('Анимация начинается');
            });
            block.addEventListener('animationiteration', () => {
                alert('Анимация второй раз');
            });
            block.addEventListener('animationend', () => {
                alert('Анимация закончилась');
            });
        });
    </script>
</head>
<body>
    <div id="block"></div>
</body>
</html>

Поиск: CSS • HTML • JavaScript • Web-разработка • transition • animation • переход • анимация • Теория • Верстка

Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.