Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Раньше анимация была царством JavaScript.
Теперь в современных браузерах мы можем анимировать элементы с помощью CSS.
@keyframes блока @keyframes и animation позволяют нам указать, что и когда анимируется.
В этом эпизоде мы рассмотрим тип анимации, которая подходит для CSS, концепцию определения серии @keyframes и, наконец, способ сочетания этих ключевых кадров с настройками animation для animation страницы.
Анимации в CSS
Поскольку CSS-анимации не имеют самой глубокой поддержки браузера, они лучше всего подходят для визуального стиля, а не являются ключевой частью содержимого или дизайна страницы.
Анимации могут запускаться 1 или более раз или повторяться бесконечно. Также возможно добавить несколько анимаций к одному элементу.
Анимации могут запускаться в CSS сразу после загрузки страницы, после задержки или с помощью какого-либо изменения на основе состояния, такого как :hover :focus или :active которое мы рассмотрели в « Эпизоде 8: Hover » .
Анимации CSS также можно запускать и останавливать в Javascript, переключая свойство animation-play-state . Мы рассмотрим другие свойства и синтаксис анимации чуть позже.
Keyframes
Чтобы анимировать элемент (или выбор элементов), нам нужно указать серию ключевых кадров.
Самая основная форма анимации ключевых кадров переходит from одного набора стилей в начале to другому набору стилей в конце в течение определенного промежутка времени.
Во время анимации стили между ключевыми кадрами автоматически рассчитываются браузером — процесс, известный как анимация движения.
Каждый ключевой кадр определяется как блок стиля свойств CSS, который будет применяться к любому элементу, который использует этот set ключевых кадров.
@keyframes moveLeft { from {left: 0;} to {left: 500px;} }
Учитывая этот набор ключевых кадров, начальный ключевой кадр анимации будет выглядеть следующим образом; и окончание будет выглядеть так.
@keyframes grow { 0% {font-size: 20px;} 75% {font-size: 100px;} 100% {font-size: 10px;} }
Дополнительные ключевые кадры могут быть указаны с использованием синтаксиса в процентах. Если продолжительность анимации составляла 10 секунд, в течение первых 7,5 секунд font-size элемента увеличился бы до 100px а затем в течение следующих 2,5 секунд он уменьшился бы до 10 10px . Вы можете указать любое количество свойств для каждого ключевого кадра.
Анимация
Когда @keyframes определены, они готовы к использованию вместе со свойством animation-name .
Существует ряд свойств animation для настройки анимации по мере необходимости:
-
animation-nameуказывает блок@keyframesдля использования -
animation-durationуказанная время анимации -
animation-delayуказывает любую задержку перед началом анимации -
animation-iteration-countуказывает количество повторений -
animation-directionуказывает направление; анимации могут воспроизводиться вперед (в обычном режиме), в обратном направлении или попеременно вперед и назад -
animation-play-stateпозволяет приостанавливать и возобновлять анимацию -
animation-timing-functionопределяет кривую ускорения воспроизведения анимации между ключевыми кадрами. -
animation-fill-modeопределяет способ применения стилей до и после анимации
Эти 8 свойств могут быть объединены в сокращенное свойство animation следующим образом:
.box { animation: name duration delay count direction play-state timing fill-mode; }
Единственные обязательные свойства, чтобы анимация была видна хотя бы один раз: animation-name и animation-duration .
Анимация прыгающего мяча
Давайте посмотрим на практический пример.
Мы можем создать шар, используя поле равной width и height с установленным на 100% border-radius . Мы можем заставить шар подпрыгивать вверх и вниз, точно позиционируя его и анимируя top или bottom значения во времени.
Мы можем придать мячу чуть больше реализма, раздавив его в нижней части анимации, прежде чем заставить его двигаться вверх, с немного меньшей скоростью.
.ball { position: absolute; width: 100px; height: 100px; border-radius: 100%; animation: bounce 3s linear infinite; } @keyframes bounce { 0% {bottom: 100%;} 25% { bottom: 0; width: 100px; height: 100px; } 30% { bottom: 0; height: 50px; width: 110px; } 35% { bottom: 0; width: 100px; height: 100px; } 70% { bottom: 100%; } 100% { bottom: 100%; } }
Мы можем заставить шар двигаться по экрану, добавив вторую анимацию, которая анимирует left свойство шара. Они могут быть разделены запятыми, поэтому они применяются к одному и тому же элементу.
Чтобы создать впечатление, что шар медленно отскакивает по экрану, мы можем увеличить продолжительность этой второй анимации.
@keyframes moveLeft { from {left: 0;} to {left: 100%;} } .ball { animation: bounce 3s linear, moveLeft 12s linear infinite; }
Поддержка браузера
CSS-анимация не поддерживается в IE9 или ниже или Opera Mini. В IE10, IE11 и Firefox свойства @keyframes и animation не -webkit префиксов, но префиксы -webkit нужны везде.
Следите за нашей статьей Quick Tip в ближайшее время!