Главная1 курс UX/UI8 занятие. CSS-анимациям3. CSS Animations с @keyframes
8 занятие

3. CSS Animations с @keyframes

Создание анимации:

@keyframes имя-анимации {
    0% { /* начальное состояние */ }
    50% { /* промежуточное состояние */ }
    100% { /* конечное состояние */ }
}

.element {
    animation: имя-анимации длительность тайминг-функция задержка 
               количество-повторений направление fill-mode;
}

Свойства animation:

  • animation-name: Имя анимации из @keyframes
  • animation-duration: Длительность
  • animation-timing-function: Кривая скорости
  • animation-delay: Задержка
  • animation-iteration-count: Количество повторений
    • число (1, 2, 3...)
    • infinite (бесконечно)
  • animation-direction: Направление анимации
    • normal (вперед)
    • reverse (назад)
    • alternate (вперед-назад)
    • alternate-reverse (назад-вперед)
  • animation-fill-mode: Применение стилей ключевых кадров
    • none (по умолчанию)
    • forwards (остается в конечном состоянии)
    • backwards (начинает с первого ключевого кадра)
    • both (оба эффекта)

Пример: Простая анимация пульсации

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pulse-element {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: pulse 2s infinite ease-in-out;
    margin: 50px auto;
    border-radius: 10px;
}

@keyframes

Что из себя представляет любая анимация? Это переход от одного состояния элемента к другому состоянию.

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

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

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

Чтобы превратить розовый круг в синий квадрат, нам нужно будет поменять три свойства: width, height и background-color.

Чтобы прописать ключевые кадры, используем директиву @keyframes:

@keyframes circle-to-square {
  from {
    width: 50px;
    height: 50px;
    background-color: #F498AD;
  }
  to {
    width: 200px;
    height: 200px;
    background-color: #2E9AFF;
  }
}

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

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

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

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

@keyframes circle-to-square {
  from {
    width: 50px;
    height: 50px;
    background-color: #F498AD;
  }
  50% {
    width: 50px;
    height: 200px;
    background-color: #7F6EDB;
  }
  to {
    width: 200px;
    height: 200px;
    background-color: #2E9AFF;
  }
}

Браузер расшифровывает ключевое слово from как 0%, а ключевое слово to как 100%.

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

animation-name

Для присвоения анимации элементу как раз нужно имя, которое мы придумали.

.child-one {
  animation-name: circle-to-square;
}

Теперь браузер знает, что ключевые кадры анимации с названием circle-to-square должны применяться к элементу с классом child-one.

Кроме имени анимации можно указать none, значение по умолчанию. Означает отсутствие анимации. Удобно использовать для сброса анимации.

Но анимация всё ещё не работает! Потому что браузер не знает, за какое время нужно изменять свойства элемента.

animation-duration

При помощи свойства animation-duration пропишем длительность одного цикла анимации. Значение этого свойства указывается в секундах s или миллисекундах ms.

Пусть круг превращается в квадрат за 5 секунд:

.child-one {
  animation-name: circle-to-square;
  animation-duration: 5s;
}

animation-iteration-count

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

В качестве значения указывается число, означающее количество повторений, или ключевое слово infinite. Если указано infinite, то анимация будет повторяться бесконечно. Это значение встречается чаще всего!

.child-one {
  animation-name: circle-to-square;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

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

animation-direction

Свойство animation-direction сообщает браузеру, должна ли анимация проигрываться в обратном порядке.

Доступные значения:

  • normal — значение по умолчанию, анимация воспроизводится от начала до конца, после чего возвращается к начальному кадру.
  • reverse — анимация проигрывается в обратном порядке, от последнего ключевого кадра до первого, после чего возвращается к последнему кадру.
  • alternate — каждый нечётный повтор (первый, третий, пятый) анимации воспроизводится в прямом порядке, а каждый чётный повтор (второй, четвёртый, шестой) анимации воспроизводится в обратном порядке.
  • alternate-reverse — аналогично значению alternate, но чётные и нечётные повторы меняются местами.
.child-one {
  animation-name: circle-to-square;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Теперь анимация красиво проигрывается. Круг плавно становится квадратом, а потом снова плавно превращается в круг

По факту наша анимация работает, можно оставить так. Но есть что улучшить!

animation-timing-function

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

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

При помощи свойства animation-timing-function можно задать, как будет развиваться анимация между ключевыми кадрами: равномерно, или сначала быстро, потом медленно, или по каким-то сложным внутренним законам.

  • linear
    Анимация проигрывается равномерно, без колебаний скорости.
  • ease
    Значение по умолчанию. Анимация начинается медленно, затем быстро разгоняется и снова замедляется к концу.
  • ease-in
    Анимация начинается медленно и плавно ускоряется к концу.
  • ease-out
    Анимация начинается быстро и плавно замедляется к концу.
  • ease-in-out
    Анимация начинается и заканчивается медленно, ускоряясь в середине.
  • cubic-bezier(x1, y1, x2, y2)
    Временная функция, описывающая тип ускорения в виде кривой Безье.

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

.child-one {
  animation-name: circle-to-square;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in;
}

Анимация стала более естественной, не такой компьютерной.

Пришло время заняться правой фигурой и превратить синий квадрат в розовый круг.

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

.child-two {
  animation-name: circle-to-square;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: ease-in;
}

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

animation-delay

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

Если значение положительное, то будет задержка перед началом анимации. Если значение отрицательное, то анимация начнётся как бы за кадром.

Пусть анимация правого элемента начнётся с задержкой -2.5 секунды. Так она будет начинаться с середины:

.child-two {
  animation-name: circle-to-square;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: ease-in;
  animation-delay: -2.5s;
}

animation-play-state

Свойство, позволяющее ставить анимацию на паузу и запускать снова.

Доступные значения:

  • running — анимация проигрывается (значение по умолчанию).
  • paused — анимация ставится на паузу. При повторном запуске анимации она продолжается с того места, где была остановлена.

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

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

animation-fill-mode

Последнее свойство анимации — animation-fill-mode — сообщает браузеру, нужно ли применять стили ключевых кадров до или после проигрывания анимации.

Доступные значения:

  • none — стили анимации не применяются до и после проигрывания анимации (значение по умолчанию).
  • forwards — после окончания анимации элемент сохранит стили последнего ключевого кадра.
  • backwards — после окончания анимации к элементу будут применены стили первого ключевого кадра.
  • both — до начала анимации к элементу применяется первый ключевой кадр, а после окончания анимации элемент останется в состоянии последнего ключевого кадра.

animation

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

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

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

.child-two {
  animation: circle-to-square 2s infinite alternate-reverse ease-in 1s;
}

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

Есть возможность применить к одному элементу сразу несколько анимаций. Для этого нужно перечислить несколько значений через запятую. Возможно указать любое количество значений для любого из свойств анимации. Анимации будут воспроизводиться одновременно.

Например, разобьём предыдущую анимацию на две отдельные. Одна будет отвечать за изменение формы элемента, а вторая за изменение цвета.

@keyframes circle-to-square {
  from {
    width: 50px;
    height: 50px;
  }
  50% {
    width: 100%;
    height: 50px;
  }
  to {
    width: 100%;
    height: 100%;
  }
}

@keyframes color-change {
  from {
    background-color: #F498AD;
  }
  50% {
    background-color: #7F6EDB;
  }
  to {
    background-color: #2E9AFF;
  }
}

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

.child {
  animation:
    circle-to-square 10s infinite alternate ease-out 1s,
    color-change 5s alternate linear infinite;
}