В прошлой статье мы делали краткий обзор CSS-переходов, а в этом посте проведем ознакомительный рейд по полезным, как я надеюсь, вопросам CSS-анимации. Эти два новых свойства в CSS3 позволяют создавать на сайте привлекательную и «магическую» интерактивность, даже без использования JavaScript. Также, в сегодняшнем посте, рассмотрим практический пример применения свойства animation в CSS.
Анимация в CSS3 уже сегодня используется практически всеми современными веб-дизайнерами, несмотря на более высокие стандарты и требования к браузерам.
Поскольку эти новшества для многих остаются непонятыми, с помощью данного поста мы попробуем пролить свет на них.
Если CSS-переходы связаны с изменением свойств элемента при переходе из одного состояния в другое, то CSS-анимация зависит от ключевых кадров и свойств анимации. С помощью CSS-анимации можно создавать эффекты, которые будут автоматически запускаться и повторяться в заданном промежутке времени.
@keyframes
) и определяют то, как элемент будет анимироваться.Анимация в CSS может применяться практически ко всем элементам в HTML5 (включая псевдоэлементы :before
и :after
).
animation
присваивается определенному блоку в его «спокойном» (обычном) состоянии с помощью свойств анимации, которые можно использовать для анимации многих свойств CSS (например, цвет фона, высота или ширина). Поведение анимации определяется с помощью правил в ключевых кадрах (@keyframes
).
Есть восемь свойств animation
(в алфавитном порядке):
animation-delay
– задает задержку перед началом анимации, в секундахanimation-direction
– указывает на то, должна ли анимация воспроизводиться в обратном или чередующемся циклах (reverse или alternate)animation-duration
– определяет то, сколько секунд или миллисекунд требуется анимации для завершения одного циклаanimation-fill-mode
– стиль для элемента, когда анимация не воспроизводится. Например, когда анимация завершилась или у нее задана задержкаanimation-iteration-count
– задает количество раз, которое должна воспроизводиться анимация (infinite – для бесконечного количества раз)animation-name
– определяет имя @keyframes
анимацииanimation-play-state
– указывает на то, запущена ли анимация или приостановлена (running или paused)animation-timing-function
– определяет кривую скорости анимации
Весь синтаксис свойств анимации выглядит так:
div { animation-name: здесь название для ключевых кадров; animation-duration: продолжительность анимации в секундах или миллисекундах; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; }
А короткая запись свойств анимации выглядит так:
div { animation: nazvaniye-animaciyi 1.5s ease-out 0s alternate infinite none running; }
Свойства записываются без запятых, желательно в порядке следования свойств. При этом, если некоторые свойства не указать, будут задействованы свойства по умолчанию. Если нужно присвоить одному элементу несколько разных ключевых кадров, тогда между свойствами ставится запятая.
Образец синтаксиса ключевых кадров @keyframes
выглядит так:
@keyframes [название анимации] { 0% { /* начальный кадр */ [свойство CSS]:[значение свойства]; } 100% { /* финальный кадр */ [свойство CSS]:[значение свойства]; } }
В правилах @keyframes
можно использовать больше двух (начального и финального) ключевых кадров (например, промежуточные в отметке 30%, 75% и т.д.). Также в каждом ключевом кадре можно указывать достаточно большое количество свойств CSS.
Ниже представлен практический пример CSS кода для создания анимации большого красного круга.
div { background-color: red; border-radius: 50%; height: 250px; width: 250px; margin: 50px; animation: pulsirovaniye 2s ease infinite; } @keyframes pulsirovaniye { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
Демо-пример кода:
Смотрите больше примеров анимации в CSS с помощью ключевых кадров keyframes в нашем практическом уроке.
Практически все современные браузеры поддерживают это свойство, но для большей совместимости нужно использовать префиксы браузеров, причем стандартный синтаксис объявляется последним. Это относится и к свойству animation, и к правилам ключевых кадров keyframes:
div { -webkit-animation: [название кейфрейма] 3s infinite; -moz-animation: [название кейфрейма] 3s infinite; -o-animation: [название кейфрейма] 3s infinite; animation: [название кейфрейма] 3s infinite; } @-webkit-keyframes [название кейфрейма] { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes [название кейфрейма] { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes [название кейфрейма] { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes [название кейфрейма] { 0% { opacity: 0; } 100% { opacity: 1; } }
Спасибо за внимание!
Модели последних серий компании Apple пользуются большой популярностью, в том числе и iPhone 14 Pro…
Если хочешь узнать человека, не слушай, что о нем говорят другие, послушай, что он говорит…
Извинение — не означает, что ты не прав, а другой человек прав. Это всего лишь…
Атмосферу бумажной книги, запах свежих чернил и чуть залежавшейся бумаги сложно заменить гаджетами. Но электронные…