Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ animate css – основной синтаксис, настройка ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования Animate.css

ΠœΠΎΠ½ΠΈΡ‚ΠΎΡ€ ImacΠŸΡ€ΠΈΠ²Π΅Ρ‚. Напомню, Ρ‡Ρ‚ΠΎ ΡƒΠΆΠ΅ писал ΠΏΡ€ΠΎ ΠΏΠ»Π°Π²Π½ΠΎΡΡ‚ΡŒ ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π² CSS3, Π½ΠΎ это Π±Ρ‹Π»ΠΈ всСго лишь Π±Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹. БСйчас ΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅ animate.css. Π­Ρ‚ΠΎ Π½Π΅ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€, Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, которая Π²ΠΏΠΎΠ»Π½Π΅ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх популярных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. И Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΎΡ‚ эти ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹.

Π”Π΅ΠΌΠΎ

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Animate.css

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, тСкста, ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ для сайта ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ всС это Π±Π΅Π· использования Javascript, Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ всСго лишь ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ»ΠΈΠΊ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΎΡΡŒ Π²Ρ‹ΡˆΠ΅, стандартным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ head.

 <link rel="stylesheet" href="animate.min.css" />

<link rel=»stylesheet» href=»animate.min.css» />

Π’Ρ‹ сами ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ CSS анимация, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ ΠΆΠ΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ сайта, ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ хочСтся ΠΏΠ΅Ρ€ΠΈ скроллингС. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ всС эффСкты настроСны Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° страница сайта Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ Π±Ρ‹Π»Π° Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π°. Но Π»ΠΈΡ‡Π½ΠΎ мСня интСрСсовала цикличСская ΠΈΠ»ΠΈ бСсконСчная анимация. И Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ это Π²ΠΏΠΎΠ»Π½Π΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ.

<a href="#">Бсылка</a>

<a href=»#»>Бсылка</a>

ИмСнно Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ прописываСтся свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ². ПишСм 2 класса, animated β€” ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, Π° tada β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· эффСктов. Но Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ нСпосрСдствСнно Ρ†ΠΈΠΊΠ» ΠΈ сСйчас ΠΌΡ‹ это сдСлаСм. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, создав Π½ΠΎΠ²Ρ‹ΠΉ класс ΠΈ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊ Π½Π΅ΠΌΡƒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ свойства ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΊ ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌΡƒ.

ЦикличСская анимация Animate.css

.tada{animation-iteration-count: infinite;}

.tada{animation-iteration-count: infinite;}

Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈ создании своСго класса, это Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

<a href="#">Бсылка</a>

<a href=»#»>Бсылка</a>

.new{animation-iteration-count: infinite;}

.new{animation-iteration-count: infinite;}

А Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π°ΠΌ Π±Ρ‹Π»ΠΎ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ понятно, Ρ‡Ρ‚ΠΎ я Ρ‚ΡƒΡ‚ пытался ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ, Ρ‚ΠΎ посмотритС это Π²ΠΈΠ΄Π΅ΠΎ, Π³Π΄Π΅ я наглядно Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽ Π½Π° Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ скачайтС сами стили.

БКАЧАВЬ

Π£Ρ‡Π΅Π±Π½ΠΈΠΊ CSS 3. Π‘Ρ‚Π°Ρ‚ΡŒΡ «ΠΠ½ΠΈΠΌΠ°Ρ†ΠΈΡ элСмСнтов Π² CSS. Π§Π°ΡΡ‚ΡŒ 2»

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ Π½ΡŽΠ°Π½ΡΡ‹ примСнСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈΠ·ΡƒΡ‡ΠΈΠΌ Ρ‚Π°ΠΊΠΈΠ΅ возмоТности CSS ΠΊΠ°ΠΊ приостановка Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, рассмотрим ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится, Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΊΠ°ΠΊ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ свойство для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠΌ ΠΈ научимся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Animate.css

.

Рис. 196Π° ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠΊΠ°Π΄Ρ€ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ для изучСния этого ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° Π’Π°ΠΌ понадобятся знания, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ «ΠΠ½ΠΈΠΌΠ°Ρ†ΠΈΡ Π² CSS. Π§Π°ΡΡ‚ΡŒ 1».

БостояниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ простоС свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ рассмотрим animation-play-state, ΠΎΠ½ΠΎ опрСдСляСт состояниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎΠΌΡƒ свойству пСрСдаСтся ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π΄Π²ΡƒΡ… Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов:

  • running — анимация воспроизводится (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ).
  • paused — анимация приостановлСна.

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>ΠŸΡ€ΠΈΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΊΠ° ΠΈ запуск Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ</title>
<style>
.test {
width: 100px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
height: 100px; /* высота элСмСнта */
color: white; /* Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π±Π΅Π»Ρ‹ΠΉ */
background: green; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
position: relative; /* элСмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */
animation-name: iliketomoveit; /* имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
animation-duration: 5s; /* ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
animation-iteration-count: infinite; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ бСсконСчно  */
animation-play-state: running; /* анимация воспроизводится (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)  */
}
.test:hover
{ animation-play-state: paused; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация приостанавливаСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт */ } @keyframes iliketomoveit { 0% {left: 0px;} /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 25% {left: 400px;} /* 25% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 75% {left: 200px;} /* 75% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 100% {left: 0px;} /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ } </style> </head> <body> <div class = "test">Π½Π°Π²Π΅Π΄ΠΈ Π½Π° мСня</div> </body> </html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства left смСщаСм элСмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ.

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° элСмСнт курсора ΠΌΡ‹ΡˆΠΈ (псСвдокласс :hover()) анимация приостанавливаСтся Π·Π° счСт установки значСния paused свойству animation-play-state, анимация возобновляСтся, ΠΊΠΎΠ³Π΄Π° курсор ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ элСмСнт.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 197 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ приостановки ΠΈ запуска Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

НаправлСниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

CSS свойство animation-direction опрСдСляСт Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ анимация Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, ΠΈΠ»ΠΈ Π² Π²ΠΈΠ΄Π΅ Ρ‡Π΅Ρ€Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ…ΡΡ Ρ†ΠΈΠΊΠ»ΠΎΠ². По Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ с ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌΠΈ свойствами допускаСтся ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, пСрСчислСнных Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ (для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ).

НиТС прСдставлСны Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния для настройки направлСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
normalΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Ρ†ΠΈΠΊΠ» Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π²Π΅Ρ€ΡˆΡ‘Π½, анимация сбрасываСтся Π² Π½Π°Ρ‡Π°Π»ΠΎ ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Ρ†ΠΈΠΊΠ» Π·Π°Π½ΠΎΠ²ΠΎ. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
reverseАнимация Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ.
alternateАнимация Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ normal ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π½Π΅Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π· (1, 3, 5…) ΠΈ ΠΊΠ°ΠΊ reverse ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π· (2, 4, 6…).
alternate-reverseАнимация Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ reverse ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π½Π΅Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π· (1, 3, 5…) ΠΈ ΠΊΠ°ΠΊ normal ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π· (2, 4, 6…).

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>НаправлСниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ</title>
<style>
div {
width: 75px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
height: 75px; /* высота элСмСнта */
border-radius: 60px; /* Ρ„ΠΎΡ€ΠΌΠ° ΡƒΠ³Π»ΠΎΠ² элСмСнта */
display: inline-block; /* устанавливаСм элСмСнты <div> ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½ΠΎ-строчныС (выстраиваСм Π² Π»ΠΈΠ½Π΅ΠΉΠΊΡƒ) */
color: white; /* Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π±Π΅Π»Ρ‹ΠΉ */
padding: 15px; /* Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы элСмСнта со всСх сторон */
position: relative; /* элСмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */
animation-duration: 1.5s; /* Π·Π°Π΄Π°Ρ‘ΠΌ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 1,5 сСкунды */
animation-name: iliketomoveit; /* Π·Π°Π΄Π°Ρ‘ΠΌ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
animation-iteration-count: infinite; /* анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ бСсконСчно  */
}
.test
{ animation-direction: normal; /* ΠΏΡ€ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, анимация сбрасываСтся Π² Π½Π°Ρ‡Π°Π»ΠΎ ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Ρ†ΠΈΠΊΠ» Π·Π°Π½ΠΎΠ²ΠΎ. */ } .test2 { animation-direction: reverse; /* анимация Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ */ } .test3 { animation-direction: alternate; /* анимация Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ normal ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π½Π΅Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π· (1, 3, 5...) ΠΈ ΠΊΠ°ΠΊ reverse ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π· (2, 4, 6...) */ } .test4 { animation-direction: alternate-reverse; /* анимация Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ reverse ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π½Π΅Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π· (1, 3, 5...) ΠΈ ΠΊΠ°ΠΊ normal ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π· (2, 4, 6...) */ } @keyframes iliketomoveit { 0% {top: 0px;} /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 25% {top: 180px; background: red;} /* 25% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 75% {top: 90px;} /* 75% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 100% {top: 0px; background: black;} /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ } </style> </head> <body> <div class = "test">normal</div> <div class = "test2">reverse</div> <div class = "test3">alternate</div> <div class = "test4">alternate-reverse</div> </body> </html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства top смСщаСм элСмСнты с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, измСняя ΠΏΡ€ΠΈ этом Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° элСмСнта.

Π‘ использованиСм сСлСктора класса ΠΈ свойства animation-direction ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ направлСния для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 198 НаправлСниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² CSS.

Π‘Ρ‚ΠΈΠ»ΡŒ для элСмСнта, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится

CSS свойство animation-fill-mode Π·Π°Π΄Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится (ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π°, ΠΈΠ»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ, ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»Π΅Π½Π½ΡƒΡŽ свойством animation-delay).

НиТС прСдставлСны Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния для настройки этого свойства:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
none К элСмСнту Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ стили Π΄ΠΎ (Π²ΠΎ врСмя Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ), ΠΈΠ»ΠΈ послС воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
forwardsПо ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊ элСмСнту примСняСтся ΡΡ‚ΠΈΠ»ΡŒ послСднСго ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°. Каким Π±ΡƒΠ΄Π΅Ρ‚ этот ΠΊΠ°Π΄Ρ€ зависит ΠΎΡ‚ сочСтания Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойств animation-direction ΠΈ animation-iteration-count:
animation-direction
(Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ normal)
animation-iteration-count
(Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 1)
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ послСднСго
ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°
normalΡ‡Π΅Ρ‚Π½ΠΎΠ΅ ΠΈΠ»ΠΈ Π½Π΅Ρ‡Π΅Ρ‚Π½ΠΎΠ΅ число100% ΠΈΠ»ΠΈ to
reverseΡ‡Π΅Ρ‚Π½ΠΎΠ΅ ΠΈΠ»ΠΈ Π½Π΅Ρ‡Π΅Ρ‚Π½ΠΎΠ΅ число0% ΠΈΠ»ΠΈ from
alternateΡ‡Π΅Ρ‚Π½ΠΎΠ΅ число0% ΠΈΠ»ΠΈ from
alternateΠ½Π΅Ρ‡Π΅Ρ‚Π½ΠΎΠ΅ число100% ΠΈΠ»ΠΈ to
alternate-reverse
Ρ‡Π΅Ρ‚Π½ΠΎΠ΅ число
100% ΠΈΠ»ΠΈ to
alternate-reverseΠ½Π΅Ρ‡Π΅Ρ‚Π½ΠΎΠ΅ число0% ΠΈΠ»ΠΈ from
backwardsК элСмСнту примСняСтся ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°, дСйствиС сохраняСтся Π½Π° протяТСнии ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойством animation-delay. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ опрСдСляСтся Π½Π° основании значСния animation-direction:
animation-direction
(Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ normal)
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ
ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°
normal0% ΠΈΠ»ΠΈ from
alternate0% ΠΈΠ»ΠΈ from
reverse100% ΠΈΠ»ΠΈ to
alternate-reverse100% ΠΈΠ»ΠΈ to
bothК элСмСнту ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΎΠ±Π° значСния: forwards ΠΈ backwards (ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° — Π²ΠΎ врСмя Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ).

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>ИспользованиС свойства animation-fill-mode</title>
<style>
div
{ width: 100px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */ height: 100px; /* высота элСмСнта */ color: white; /* Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ background: green; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */ display: inline-block; /* устанавливаСм элСмСнты <div> ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½ΠΎ-строчныС (выстраиваСм Π² Π»ΠΈΠ½Π΅ΠΉΠΊΡƒ) */ position: relative; /* элСмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ animation-name: iliketomoveit; /* имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ animation-duration: 5s; /* ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ animation-animation-delay: 2s; /* анимация воспроизводится c Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ 2 сСкунды */ } .test { animation-fill-mode: none; /* Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ стили Π΄ΠΎ (Π²ΠΎ врСмя Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ), ΠΈΠ»ΠΈ послС воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ } .test2 { animation-fill-mode: forwards; /* ΠΏΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ примСняСтся ΡΡ‚ΠΈΠ»ΡŒ послСднСго ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° (красный Ρ„ΠΎΠ½) */ } .test3 { animation-fill-mode: backwards; /* примСняСтся ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°, дСйствиС сохраняСтся Π½Π° протяТСнии ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ. */ } .test4 { animation-fill-mode: both; /* ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΎΠ±Π° значСния: forwards ΠΈ backwards (ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° - Π²ΠΎ врСмя Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ). */ } @keyframes iliketomoveit { 0% {background: yellow;} /* Π·Π°Π΄Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Ρ‡Π°Π»Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 100% {background: red;} /* Π·Π°Π΄Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΏΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ } </style> </head> <body> <div class = "test">none</div> <div class = "test2">forwards</div> <div class = "test3">backwards</div> <div class = "test4">both</div> </body> </html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ 5 сСкунд (animation-duration), Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ происходит ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° элСмСнта. ΠŸΡ€ΠΈ этом анимация ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ€Π°Π²Π½ΡƒΡŽ 2 сСкундам (animation-delay).

Π‘ использованиСм сСлСктора класса ΠΈ свойства animation-fill-mode ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится (ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π°, ΠΈΠ»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ):

  • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт — ΠΊ элСмСнту Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ стили Π΄ΠΎ (Π²ΠΎ врСмя Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ), ΠΈΠ»ΠΈ послС воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  • Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт — ΠΏΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊ элСмСнту примСняСтся ΡΡ‚ΠΈΠ»ΡŒ послСднСго ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° (красный Ρ„ΠΎΠ½).
  • Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт — ΠΊ элСмСнту примСняСтся ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°, дСйствиС сохраняСтся Π½Π° протяТСнии ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π½Π° протяТСнии ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ отобраТаСтся ΠΆΠ΅Π»Ρ‚Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ (ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€).
  • Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ элСмСнт — ΠΊ элСмСнту ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΎΠ±Π° значСния: forwards ΠΈ backwards (ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° — Π²ΠΎ врСмя Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ). Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π½Π° протяТСнии ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ отобраТаСтся ΠΆΠ΅Π»Ρ‚Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ (ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€), Π° ΠΏΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΡŽ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ красный Ρ„ΠΎΠ½

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 199 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования свойства animation-fill-mode.

Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ свойство animation

ΠœΡ‹ с Π’Π°ΠΌΠΈ рассмотрСли всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π²Π²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Π² CSS 3, это Π½Π°ΠΌ Π±Ρ‹Π»ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ свойство animation, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ всС эти свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии, вСдь Π½Π°Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌ, ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΠΌ свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ рассмотрСли:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, порядок свойств Π² спискС соотвСтствуСт Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΌΡƒ порядку указания Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π² свойствС animation. Имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠ°ΠΊ Π² Π½Π°Ρ‡Π°Π»Π΅ списка, Ρ‚Π°ΠΊ ΠΈ Π² Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ†Π΅.


НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ Π² ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ порядкС ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (animation-duration), ΠΈΠ½Π°Ρ‡Π΅, анимация Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Ρ€Π°Π½Π°, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρƒ этого свойства Ρ€Π°Π²Π½ΠΎ Π½ΡƒΠ»ΡŽ.


ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>ИспользованиС ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ свойства animation</title>
<style>
.test {
width: 100px; /* устанавливаСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠΊΠ° */
height: 100px; /* устанавливаСм высоту Π±Π»ΠΎΠΊΠ° */
position: relative; /* элСмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */
animation: iliketomoveit 4s steps(3,start) 500ms infinite reverse; /* name duration timing-function delay iteration-count direction */ 
} 
@keyframes iliketomoveit {
	0%   {left: 0px;} /* Π·Π°Π΄Π°Π΅ΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнта ΠΏΡ€ΠΈ Π½Π°Ρ‡Π°Π»Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 
	50% {left: 500px; border-radius: 50px; background: plum;} /* Π·Π°Π΄Π°Π΅ΠΌ смСщСниС элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края, измСняСм Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΈ опрСдСляСм Ρ„ΠΎΡ€ΠΌΡƒ Π³Ρ€Π°Π½ΠΈΡ† (скруглСниС) */ 
	100% {left: 0px; background: green;} /* Π·Π°Π΄Π°Π΅ΠΌ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π·Π°Π΄Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΏΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 
} 
</style>
</head>
	<body>
		<div class = "test"></div>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства left смСщаСм элСмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, измСняя ΠΏΡ€ΠΈ этом Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΈ Ρ„ΠΎΡ€ΠΌΡƒ Π³Ρ€Π°Π½ΠΈΡ† элСмСнта (свойство border-radius).

Π‘ использованиСм ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ свойства animation ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

  • Имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ — iliketomoveit.
  • Π”Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ — 4 сСкунды.
  • ΠšΡ€ΠΈΠ²Π°Ρ скорости — шаговая анимация steps(3,start). На ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΎ 3 шага.
  • Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ — 500 миллисСкунд.
  • ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Ρ†ΠΈΠΊΠ»ΠΎΠ² — infinite (бСсконСчно).
  • НаправлСниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ — reverse (Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ).

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 200 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ свойства animation.

Рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Анимация Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π½Π° CSS</title>
<style>
body {
margin: 0; /* внСшниС отступы */
padding: 0; /* Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы */
}
.container {
width: 100px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
padding-top: 100px; /* Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы свСрху */
margin: 0 auto; /* Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ элСмСнт внСшними отсутупами */
}
div > div {
display: inline-block; /* устанавливаСм Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ элСмСнты <div> ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½ΠΎ-строчныС (выстраиваСм Π² Π»ΠΈΠ½Π΅ΠΉΠΊΡƒ) */
width: 10px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
height: 10px; /* высота элСмСнта */
margin: 0 auto; /* Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ элСмСнты внСшними отсутупами */
border-radius: 50px; /* опрСдСляСм Ρ„ΠΎΡ€ΠΌΡƒ ΡƒΠ³Π»ΠΎΠ² */
}
.item:nth-child(1) {
background: orange; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
animation: up 1s linear 1s infinite; /* name duration timing-function delay iteration-count */ 
}
.item:nth-child(2) {
background: violet; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
animation: up 1s linear 1.2s infinite; /* name duration timing-function delay iteration-count */ 
}
.item:nth-child(3) {
background: magenta; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
animation: up 1s linear 1.4s infinite; /* name duration timing-function delay iteration-count */ 
}
.item:nth-child(4) {
background: lightseagreen; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
animation: up 1s linear 1.6s infinite; /* name duration timing-function delay iteration-count */ 
}
.item:nth-child(5) {
background: forestgreen; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
animation: up 1s linear 1.8s infinite; /* name duration timing-function delay iteration-count */ 
}
@keyframes up {
    0%, 100% { /* Π½Π°Ρ‡Π°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
    transform: translateY(-15px); /* сдвиг элСмСнта ΠΏΠΎ оси Y */
    }
    50% { /* сСрСдина Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
    transform: translate(5px, 0); /* сдвиг элСмСнта Π½Π° 5px ΠΏΠΎ оси X, ΠΏΠΎ оси Y сдвиг отсутствуСт */
    }
}
</style>
</head>
	<body>
		<div class = "container"></div>
			<div class = "item"></div>
			<div class = "item"></div>
			<div class = "item"></div>
			<div class = "item"></div>
			<div class = "item"></div>
		</div>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали нСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства transform происходит сдвиг Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… элСмСнтов <div> ΠΏΠΎ оси X (Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ось) ΠΈ ΠΏΠΎ оси Y (Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ось). Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта <div> Π±Ρ‹Π»Π° установлСна различная Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π°Ρ ΠΎΡ‚ 1 сСкунды Π΄ΠΎ 1,8 сСкунды. КаТдая анимация элСмСнтов содСрТит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:

  • Имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ — up.
  • Π”Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ — 1 сСкунда.
  • ΠšΡ€ΠΈΠ²Π°Ρ скорости — linear (одинаковая ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π½Π° протяТСнии всСй Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ).
  • Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ — ΠΎΡ‚ 1 сСкунды Π΄ΠΎ 1,8 сСкунды.
  • ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Ρ†ΠΈΠΊΠ»ΠΎΠ² — infinite (бСсконСчно).

Π’Ρ‹Π±ΠΎΡ€ элСмСнтов <div> происходит с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ псСвдокласса :nth-child(n) Π² заисимости ΠΎΡ‚ ΠΈΡ… размСщСния (порядкового Π½ΠΎΠΌΠ΅Ρ€Π°).

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 201 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.

Π’ этих ΡΡ‚Π°Ρ‚ΡŒΡΡ… ΠΌΡ‹ Π½Π΅ стали Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ слоТныС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ ΠΈΡ… созданиС Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ врСмя, ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π²Ρ‹ΠΉΠ΄ΡƒΡ‚ ΠΈΠ· Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° ΠΏΠ΅Ρ€Π²ΠΈΡ‡Π½ΠΎΠ³ΠΎ изучСния CSS. Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒ Вас с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ Animate.css, которая сущСствуСт ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° протяТСнии Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях Π΅Ρ‘ использованиС ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ количСство Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΏΡ€ΠΈ установкС Ρ‚ΠΎΠΉ, ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ИспользованиС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Animate.css

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Animate.css прСдставляСт ΠΈΠ· сСбя ΠΏΠΎ Π±ΠΎΠ»ΡŒΡˆΠΎΠΌΡƒ счСту Ρ„Π°ΠΉΠ» css стилСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит Π½Π°Π±ΠΎΡ€ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² для кроссбраузСрной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… эффСктов (Π½Π°Π±ΠΎΡ€ CSS свойств) ΠΈ Π½Π°Π±ΠΎΡ€ классов для ΠΈΡ… воспроизвСдСния. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° содСрТит Π½Π°Π±ΠΎΡ€ Ρ‚Π°ΠΊΠΈΡ… эффСктов ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ прозрачности элСмСнта, эффСкты для привлСчСния внимания, эффСкты ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π°, появлСния ΠΈ исчСзновСния, увСличСния ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ, ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π° сайтС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Ρ‚Π°ΠΌ ΠΆΠ΅ доступна ΠΊ ΡΠΊΠ°Ρ‡ΠΈΠ²Π°Π½ΠΈΡŽ минимизированная вСрсия стилСй (стили Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² ΠΈ пСрСносов строк). ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ GitHub Π°Π²Ρ‚ΠΎΡ€Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π²Ρ‹ смоТСтС ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ для изучСния, ΠΈΠ»ΠΈ использования Π½Π΅ ΡΠΆΠ°Ρ‚ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ CSS стилСй Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Animate.css. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ ΠΈ скачаСм Π΅Π³ΠΎ содСрТимоС (ΠΊΠ½ΠΎΠΏΠΊΠ° «Clone or Download»). На этапС изучСния Π’Π°ΠΌ понадобится ΠΈΠ· скачанного Π°Ρ€Ρ…ΠΈΠ²Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„Π°ΠΉΠ» animate.css (Π½Π΅ сТатая вСрсия).

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, достаточно ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот Ρ„Π°ΠΉΠ» стилСй Π² ΠΏΠ°ΠΏΠΊΡƒ с Π’Π°ΡˆΠΈΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ с использованиСм Ρ‚Π΅Π³Π° <link>:

<head>
	<link rel = "stylesheet" href = "animate.css"> 
</head>

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, которая измСнСняСт ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ элСмСнта:

@keyframes fadeIn {
	from { /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ 0%) */
	opacity: 0; /* элСмСнт ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ */
	}

	to { /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ 100%) */
	opacity: 1; /* элСмСнт Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ */
	}
}
.fadeIn {
animation-name: fadeIn; /* имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (соотвСтствуСт ΠΈΠΌΠ΅Π½ΠΈ Π² ΠΏΡ€Π°Π²ΠΈΠ»Π΅ @keyframes) */
}

Π­Ρ‚ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства opacity ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ элСмСнта с ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ Π΄ΠΎ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ состояния.

Но этого ΠΏΠΎΠΊΠ° нСдостаточно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰ΡƒΡŽ Вас Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Animate.css. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅, Π½ΠΎ Π½Π΅ обязаны, Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ созданными Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° классами:

/* Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ класс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ΄ΠΈΠ½ Ρ†ΠΈΠΊΠ» */ 
.animated { 
animation-duration: 1s; /* ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 1 сСкунда */
animation-fill-mode: both; /* Π·Π°Π΄Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится (ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° - Π²ΠΎ врСмя Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ).*/
}

/* Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ класса .infinite элСмСнту, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ установлСн класс .animated ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ бСсконСчно ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ */ 
.animated.infinite {
animation-iteration-count: infinite; /* анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ бСсконСчно */
}

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свои классы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ процСсс Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ классов Ρ‚ΠΎΠΌΡƒ, ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌΡƒ элСмСнту происходит с использованиСм языка JavaScript Π² зависимости ΠΎΡ‚ дСйствий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… событий. ΠœΡ‹ с Π’Π°ΠΌΠΈ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ классы ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Animate.css ΠΈ установим Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с использованиСм каскадных Ρ‚Π°Π±Π»ΠΈΡ† стилСй.

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Анимация с использованиСм Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Animate.CSS</title>
	<link rel = "stylesheet" href = "animate.css"> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Animate.css -->
</head>
	<body>
		<img src = "/images/fair.png" alt = "mishka" width = "200px" height = "200px" class = "animated infinite fadeIn">
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ с использованиСм Ρ‚Π΅Π³Π° <link> Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Animate.css ΠΈ размСстили ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ (ΡƒΠΊΠ°Π·Π°Π»ΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π») ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ 3 класса ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис.202 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с использованиСм Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Animate.CSS.

Анимация Animations CSS ΡƒΡ€ΠΎΠΊΠΈ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… акадСмия



Анимация CSS

CSS анимация позволяСт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° HTML элСмСнтов Π±Π΅Π· использования JavaScript ΠΈΠ»ΠΈ Flash!

CSS


ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ

НомСра Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, которая ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ свойство.

НомСра -WebKit-, -ΠœΠžΠ—-, ΠΈΠ»ΠΈ -o- ΡƒΠΊΠ°ΠΆΠ°Ρ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ, которая Ρ€Π°Π±ΠΎΡ‚Π°Π»Π° с прСфиксом.

Бвойство
@keyframes43.0
4.0Β -webkit-
10.016.0
5.0Β -moz-
9.0
4.0Β -webkit-
30.0
15.0Β -webkit-
12.0 -o-
animation43.0
4.0Β -webkit-
10.016.0
5.0Β -moz-
9.0
4.0Β -webkit-
30.0
15.0Β -webkit-
12.0Β -o-

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ анимация CSS?

Анимация позволяСт элСмСнту постСпСнно ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ стиля ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ любоС количСство свойств CSS, сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ Ρ€Π°Π·.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ CSS, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ сначала ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π΄Π΅Ρ€ΠΆΠ°Ρ‚ ΠΊΠ°ΠΊΠΈΠ΅ стили элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ врСмя.


ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes

ΠŸΡ€ΠΈ ΡƒΠΊΠ°Π·Π°Π½ΠΈΠΈ стилСй CSS Π²Π½ΡƒΡ‚Ρ€ΠΈ @keyframes ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, анимация Π±ΡƒΠ΄Π΅Ρ‚ постСпСнно ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΎΡ‚ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ стиля ΠΊ Π½ΠΎΠ²ΠΎΠΌΡƒ ΡΡ‚ΠΈΠ»ΡŽ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ врСмя.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ для Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΊ элСмСнту.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ анимация «example» привязываСтся ΠΊ элСмСнту <div>. Анимация Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π»ΠΈΡ‚ΡŒΡΡ 4 сСкунды, ΠΈ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ постСпСнно ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° элСмСнта <div> ΠΎΡ‚ «Red» Π½Π° «ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ»:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

/* The animation code */
@keyframes example {
Β Β Β  from {background-color: red;}
Β Β Β  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
Β Β Β  width: 100px;
Β Β Β  height: 100px;
Β Β Β  background-color: red;
Β Β Β  animation-name: example;
Β Β Β  animation-duration: 4s;
}

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° animate.css: простая анимация Π½Π° css3

Π’Ρ‹, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, ΠΎΠ±Ρ€Π°Ρ‰Π°Π»ΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты ΠΏΡ€ΠΈ ΠΏΠΎΠΊΠ°Π·Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… сайтах.

ΠžΡ‡Π΅Π½ΡŒ красиво, Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ выглядит постСпСнноС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈΠ»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π·Π°ΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊ с ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ пост.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ для Π±Π»ΠΎΠΊΠΎΠ² ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ вовсС Π½Π΅ слоТно, сСгодня я расскаТу ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

Основой ΠΌΠ½ΠΎΠ³ΠΈΡ… эффСктов являСтся сборник animate.css
Он создан Дэном Π­Π΄Π΅Π½ΠΎΠΌ, британским Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ ΠΈΠ· ΠœΠ°Π½Ρ‡Π΅ΡΡ‚Π΅Ρ€Π°.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС эффСкты Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ animate.cssΒ ΠΌΠΎΠΆΠ½ΠΎ здСсь — https://daneden.github.io/animate.css

Π’Π°ΠΌ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» animate.css

ΠžΡ†Π΅Π½ΠΈΡ‚Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΠΎΠ΅ΠΉ Π½ΠΎΠ²ΠΎΠΉ Ρ‚Π΅ΠΌΡ‹ для wordpress All Services:

— Анимация Π±Π»ΠΎΠΊΠΎΠ²,
— Анимация тСкста.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ эффСкт ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ страницу Π²Π½ΠΈΠ·.

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π½Π° сайт?

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅:

  1. Π‘ΠΊΠ°Ρ‡Π°ΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» animate.css
  2. ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» animate.css
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ подходящий эффСкт
  4. ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΊ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ элСмСнту

↑ Π‘ΠΊΠ°Ρ‡Π°ΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» animate.css

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ этого Ρ„Π°ΠΉΠ»Π° — https://github.com/daneden/animate.css/blob/master/animate.css .
Она ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Π΅ ΠΏΠΎΠ΄ свои Π½ΡƒΠΆΠ΄Ρ‹.

Или ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ — https://github.com/daneden/animate.css/blob/master/animate.min.css, ΠΎΠ±Ρ„ΡƒΡΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ, говоря русским языком :).

Она мСньшС Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΈ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π²Ρ‹ Π½Π΅ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ с Π½Π΅ΠΉ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅.

↑ ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» animate.css

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π² functions.php, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

// register scripts & styles
function animate_scripts() {
  if (!is_admin()) {
     wp_register_style('animate', esc_url(get_template_directory_uri()). '/css/animate.css');

Π£Ρ‡Π΅Π±Π½ΠΈΠΊ CSS 3. Π‘Ρ‚Π°Ρ‚ΡŒΡ «ΠΠ½ΠΈΠΌΠ°Ρ†ΠΈΡ элСмСнтов Π² CSS. Π§Π°ΡΡ‚ΡŒ 1»

Π Π°Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ° «ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½Ρ‹Π΅ эффСкты Π² CSS» ΠΌΡ‹ с Π’Π°ΠΌΠΈ познакомились с эффСктами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π° CSS свойств ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ (transition). CSS3 прСдоставляСт Π½Π°ΠΌ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ограничиваСтся Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°, Π° позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ количСство Ρ‚Π°ΠΊΠΈΡ… ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ².

Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, анимация позволяСт Π½Π°ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ состояния (Π½Π°Π±ΠΎΡ€Π° свойств) ΠΊΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ, ΠΎΡ‚ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΊ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌΡƒ, ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ нСобходимости Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ порядкС, ΠΊΠΎΠ³Π΄Π° количСство ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΎ.

Рис. 190 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠΊΠ°Π΄Ρ€ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

По Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ с ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½Ρ‹ΠΌΠΈ эффСктами, для проигрывания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‘ воспроизвСдСниС, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° страницы, ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ фокуса элСмСнтом, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

Π­Ρ‚Π°ΠΏΡ‹ создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΈΠ· Ρ‡Π΅Π³ΠΎ ΠΆΠ΅ состоит процСсс создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² CSS. Для Π½Π°Ρ‡Π°Π»Π° Π’Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π§Ρ‚ΠΎ ΠΈΠ· сСбя прСдставляСт ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€? ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позиционируСтся слСва ΠΎΡ‚ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ Π’Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π΄ΠΎ сСрСдины ΠΎΠΊΠ½Π° ΠΈ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π΅Π³ΠΎ Π² ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Для этой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π°ΠΌ потрСбуСтся Ρ‚Ρ€ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π°:

  • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ – опрСдСляСт Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнта.
  • Π’Ρ‚ΠΎΡ€ΠΎΠΉ – опрСдСляСт ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнта послС смСщСния элСмСнта Π΄ΠΎ сСрСдины ΠΎΠΊΠ½Π°.
  • Π’Ρ€Π΅Ρ‚ΠΈΠΉ – опрСдСляСт ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнта).

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹, Π½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΠ·Π»Π°Π³Π°Ρ‚ΡŒΡΡ Π·Π°Π΄Π°Ρ‡Π° ΠΏΡ€ΠΎΡ€ΠΈΡΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ всС ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Π΅ Ρ„Π°Π·Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ². Π’ΠΎ Π΅ΡΡ‚ΡŒ, Π·Π°Π΄Π°Ρ‡Π° ΠΏΡ€ΠΎΡ€ΠΈΡΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ элСмСнт Π² этих ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ°Ρ… Π»Π΅ΠΆΠΈΡ‚ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, с нашСй стороны Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ эти Ρ‚ΠΎΡ‡ΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΊΠ°ΠΊ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌΠΈ ΠΊΠ°Π΄Ρ€Π°ΠΌΠΈ.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ шагом Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰Π΅ΠΌΡƒ нас элСмСнту, ΠΈΠ»ΠΈ элСмСнтам. ΠŸΡ€ΠΈ этом сущСствуСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта свою ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ настройку Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π”Π°Π»Π΅Π΅ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ с Π’Π°ΠΌΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотрим, ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠ°ΠΊ Π·Π°Π΄Π°Ρ‚ΡŒ количСство Ρ†ΠΈΠΊΠ»ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Ρ‘ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Ρ‘ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅, состояниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта Π² Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ созданию Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ…ΠΎΡ‡Ρƒ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ:

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ²

Π’ CSS ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes позволяСт ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Π΅ этапы Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡƒΡ‚Π΅ΠΌ создания ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² Π² процСссС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΡ‡Π½Π΅Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ процСсс Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, задавая для Π½Π΅Π΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Π΅ шаги.

Для создания ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ синтаксиса:

@keyframes animationName {
	from | % {css-styles} /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	to | % {css-styles} /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
}
  1. Имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (animationName). Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹, создаСтся ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes с ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹ΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ впослСдствии ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² свойствС animation-name, Π»ΠΈΠ±ΠΎ Π² ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠΌ свойствС animation для добавлСния списка ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² Π² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π½ΠΎ ΠΎΠ± этом ΠΏΠΎΠ·Π΄Π½Π΅Π΅.
    Имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· латинских Π±ΡƒΠΊΠ² Π±Π΅Π· ΡƒΡ‡Π΅Ρ‚Π° рСгистра ΠΎΡ‚ A Π΄ΠΎ Z, Ρ†ΠΈΡ„Ρ€ ΠΎΡ‚ 0 Π΄ΠΎ 9, Π·Π½Π°ΠΊΠ° подчСркивания (_), ΠΈ/ΠΈΠ»ΠΈ Ρ‚ΠΈΡ€Π΅ (). ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ символ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π±ΡƒΠΊΠ²ΠΎΠΉ (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с числа, Π΄Π°ΠΆΠ΅ Ссли ΠΏΠ΅Ρ€Π΅Π΄ Π½ΠΈΠΌ ставится Ρ‚ΠΈΡ€Π΅). Π”Π²Π° Ρ‚ΠΈΡ€Π΅ подряд Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½Ρ‹ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΈΠΌΠ΅Π½ΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π·Π°Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ слова, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ none, unset, initial, ΠΈΠ»ΠΈ inherit Π² любом сочСтании.
  2. CΠ΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° (from | to | %) прСдставляСт ΠΈΠ· сСбя ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. ДопустимыС значСния:
    0%-100% - опрСдСляСт ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. 
    from - Ρ‚ΠΎΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ 0%.
    to - Ρ‚ΠΎΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ 100%. 
    
    КаТдоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ список стилСй для сСлСкторов ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ², ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°Π΄Π°Ρ‘Ρ‚ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ происходит ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€. Π£ΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° происходит смСна стиля Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… (0% — соотвСтствуСт Π½Π°Ρ‡Π°Π»Ρƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, 100% — соотвСтствуСт Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ), ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов «from» ΠΈ «to», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹ΠΌ значСниям 0% ΠΈ 100%.
    Для ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ³ΠΎ проигрывания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° ΠΈ Π΅Π³ΠΎ ΠΊΠΎΠ½Π΅Ρ† (значСния 0% | from ΠΈ 100% | to). ДопускаСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ мноТСство сСлСкторов ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°, ΠΏΡ€ΠΈ этом ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΡΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² любом порядкС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈΡ… ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π½Π΅ Π² порядкС размСщСния, Π° Π² зависимости ΠΎΡ‚ значСния ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π° (ΠΎΡ‚ мСньшСго значСния ΠΊ Π±ΠΎΠ»ΡŒΡˆΠ΅ΠΌΡƒ). Если анимация ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π΅ ΠΆΠ΅ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹Π΅ свойства, Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ ΠΈΡ… Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ: 0%, 100% {}.
  3. CSS стили (css-styles) — ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ нСсколько допустимых (Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ…) свойств стиля CSS. Если ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ Π²Ρ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Ρ‹, Ρ‚ΠΎ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, Π° свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. Π£Π·Π½Π°Ρ‚ΡŒ являСтся Π»ΠΈ свойство Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π² справочникС CSS Π² описании ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰Π΅Π³ΠΎ Вас свойства.

Бвойства, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π² ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΌ ΠΊΠ°Π΄Ρ€Π΅ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ !important ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ. Π Π°Π½Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ «ΠšΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ Π² CSS» (Ρ€Π°Π·Π΄Π΅Π» «ΠΡŽΠ°Π½ΡΡ‹ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ²») ΠΌΡ‹ ΡƒΠΆΠ΅ с Π’Π°ΠΌΠΈ Π·Π°Ρ‚Ρ€Π°Π³ΠΈΠ²Π°Π»ΠΈ вопросы ΠΎΠ± ΠΎΡ‚ΠΌΠ΅Π½Π΅ значимости стилСй.


ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ увСличСния элСмСнта, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π°:

@keyframes growElement { /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	0% { /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	width: 50px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: yellow; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */ 
	}
	50% { /* сСрСдина Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 
	width: 100px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: green; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
	}
	100% { /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	width: 200px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: red; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
	}
}

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΌΡ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈ Ρ‚Ρ€ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Π°, Π³Π΄Π΅ происходит ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅. ΠŸΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ элСмСнт ΠΊ Π½Π°Ρ‡Π°Π»Ρƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ€Π°Π²Π½ΠΎΠΉ 50 пиксСлям ΠΈ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ, ΠΊ 50% ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°ΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (сСрСдина Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ) ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΆΠ΅ 100 пиксСлСй ΠΈ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° Π·Π΅Π»Π΅Π½Ρ‹ΠΉ, Π° ΠΊ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ 200 пиксСлСй, Π° Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ красный.

Если наш элСмСнт возвращался Π±Ρ‹ ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ (ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π°), Ρ‚ΠΎ ΠΌΡ‹ Π±Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ значСния ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

@keyframes growElement { 
	0%, 100% { /* Π½Π°Ρ‡Π°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	width: 50px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: yellow; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
	}
	50% { /* сСрСдина Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	width: 100px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: green; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
	}
}

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ CSS свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ ΡƒΠΆΠ΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ — animation-name, ΠΎΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈΠ»ΠΈ список Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌΡƒ элСмСнту. КаТдоС имя ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ (ссылаСтся) Π½Π° ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ (@keyframes), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт значСния свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Но Π² ΠΎΠ΄ΠΈΠ½ΠΎΡ‡ΠΊΡƒ ΠΌΡ‹ Π½Π΅ смоТСм Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ это свойство, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Ρ‘ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π΄Π°Π»ΡŒΠ½Π΅ΠΉΡˆΠ΅ΠΌΡƒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΡŽ особСнностСй Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² CSS, Ρ…ΠΎΡ‡Ρƒ Π΅Ρ‰Π΅ Ρ€Π°Π· ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ вашС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½Π° Ρ‚ΠΎ Ρ‡Ρ‚ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΌΡ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π²Π΅Π½Π΄ΠΎΡ€Π½Ρ‹Π΅ прСфиксы ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ, Π½ΠΎ Ссли Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Ρ‚ΠΎ стоит ΠΎ Π½ΠΈΡ… Π½Π΅ Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ синтаксиса ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ²:

/* для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ старых вСрсий Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Mozilla */
@-moz-keyframes growElement { 
	/* ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ */
}

/* для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ старых вСрсий Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Chrome, Opera, Safari */
@-webkit-keyframes growElement { 
	/* ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ */
}

/* соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ */
@keyframes growElement { 
	/* ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ */
}

ВсС свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ animation-* ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ свойство animation, ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ с ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ @keyframes, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ указания Π²Π΅Π½Π΄ΠΎΡ€Π½Ρ‹Ρ… прСфиксов (-moz- ΠΈ –webkit-) для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ ΠΊΡ€ΡƒΠ³Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Как ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ анимация Π½Π°Ρ‡Π°Π»Π° Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Ρ‘ имя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±Ρ‹Π»ΠΎ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€Π°Π²ΠΈΠ»Π΅ @keyframes ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅Ρ‘ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. Π’ CSS свойство animation-duration опрСдСляСт, сколько сСкунд, ΠΈΠ»ΠΈ миллисСкунд затрачиваСтся Π½Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Ρƒ нас ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ трСбования для выполнСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Ρ‘ ΠΊ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰Π΅ΠΌΡƒ нас элСмСнту, ΠΈΠ»ΠΈ элСмСнтам страницы. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ, Ссли просто Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΊ ΡΡ‚ΠΈΠ»ΡŽ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ элСмСнта, Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ воспроизвСдСна ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы.

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ элСмСнтов:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² CSS</title>
<style>
div {
width: 50px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
height:  50px; /* высота элСмСнта */
background-color: yellow; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
margin-top: 20px; /* внСшний отступ свСрху */
}
div:nth-child(1) { /* ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт <div> ΠΏΠΎ порядку */
animation-duration: 2s; /* ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 2 сСкунды */
}
div:nth-child(2) { /* Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт <div> ΠΏΠΎ порядку */
animation-duration: 4s; /* ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 4 сСкунды */
}
div:nth-child(3) { /* Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт <div> ΠΏΠΎ порядку */
animation-duration: 900ms; /* ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 900 миллисСкунд */
}
div:hover { /* добавляСм имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° элСмСнт <div> */
animation-name: growElement; /* Π·Π°Π΄Π°Π΅ΠΌ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
}
@keyframes growElement {
	0% { /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	width: 50px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: yellow; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
	}
	50% { /* сСрСдина Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	width: 100px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: green; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
	}
	100% { /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	width: 200px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: red;  /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
	}
}
</style>
</head>
	<body>
		<div>2s</div>
		<div>4s</div>
		<div>900ms</div>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ происходит постСпСнноС ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ элСмСнта ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΊ сСрСдинС ΠΈ ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π‘ использованиСм псСвдокласса :nth-child() ΠΈ свойства animation-duration ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для элСмСнтов <div> Π² зависимости ΠΎΡ‚ ΠΈΡ… порядкового Π½ΠΎΠΌΠ΅Ρ€Π° Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ воспроизвСдСниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΌΡ‹ создали ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ свойством animation-name Π·Π°Π΄Π°Π΅Ρ‚ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для элСмСнта <div> Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π² настоящСС врСмя Π½Π°Π²Π΅Π΄Π΅Π½ курсор ΠΌΡ‹ΡˆΠΈ (псСвдокласс :hover()).

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 191 ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² CSS.

Рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ создадим нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΠΈ Π½Π°Π·Π½Π°Ρ‡ΠΈΠΌ ΠΈΡ… ΠΎΠ΄Π½ΠΎΠΌΡƒ элСмСнту.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>НСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ Ρƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта</title>
<style>
div {
width: 50px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
height:  50px; /* высота элСмСнта */
background-color: yellow; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
margin-top: 20px; /* внСшний отступ свСрху */
animation-duration: 3s; /* ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 3 сСкунды */
}
div:hover { 
animation-name: growElement, skewElement; /* Π·Π°Π΄Π°Π΅ΠΌ нСсколько ΠΈΠΌΠ΅Π½ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
}
@keyframes growElement {
	0%, 100% { /* Π½Π°Ρ‡Π°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	width: 50px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: yellow; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
	}
	50% {  /* сСрСдина Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	width: 300px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
	background-color: green; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
	}
}
@keyframes skewElement {
	5%, 100% { /* 5% ΠΈ 100% (ΠΊΠΎΠ½Π΅Ρ† Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ) ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	transform: skew(0deg); /* отсутствиС Π½Π°ΠΊΠ»ΠΎΠ½Π° элСмСнта */
	}
	50% { /* сСрСдина Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	transform: skew(-50deg); /* Π½Π°ΠΊΠ»ΠΎΠ½ элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ оси X (Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ось) Π½Π° -50 градусов. */
	}
	95% { /* 95% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	transform: skew(50deg); /* Π½Π°ΠΊΠ»ΠΎΠ½ элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ оси X (Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ось) Π½Π° 50 градусов. */
	}
}
</style>
</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали нСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… происходит постСпСнноС ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ элСмСнта, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π°, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°ΠΊΠ»ΠΎΠ½ элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ оси X (Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ось) ΠΊ сСрСдинС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ элСмСнта ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ элСмСнта ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ сопровоТдаСтся ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚Π° Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° ΠΈ Π½Π°ΠΊΠ»ΠΎΠ½ΠΎΠΌ элСмСнта ΠΏΠΎ оси X Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ сторону.

Бвойством animation-duration ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для элСмСнтов <div> Ρ€Π°Π²Π½ΡƒΡŽ Ρ‚Ρ€Π΅ΠΌ сСкундам. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ воспроизвСдСниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΌΡ‹ создали ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ свойством animation-name Π·Π°Π΄Π°Π΅Ρ‚ нСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ для элСмСнта <div> Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π² настоящСС врСмя Π½Π°Π²Π΅Π΄Π΅Π½ курсор ΠΌΡ‹ΡˆΠΈ (псСвдокласс :hover()).

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 192 Установка Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ Ρƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта.

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ†ΠΈΠΊΠ»ΠΎΠ²

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ любая анимация Π² CSS Π±ΡƒΠ΄Π΅Ρ‚ воспроизвСдСна Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·. Благодаря свойству animation-iteration-count ΠΌΡ‹ смоТСм ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ сколько Ρ€Π°Π· Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ», это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ΅ число Ρ€Π°Π·, Π»ΠΈΠ±ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ бСсконСчно, Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях это ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.


ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ запрСщаСтся ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΠΏΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ, Π½ΠΎ допускаСтся ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π΅ Ρ†Π΅Π»Ρ‹Π΅ значСния, ΠΏΡ€ΠΈ этом Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π°ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° — ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 1.5 соотвСтствуСт Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° ΠΏΠΎΠ»Ρ‚ΠΎΡ€Π° Ρ€Π°Π·Π°).


Рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ</title>
<style>
div {
width: 50px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
height: 50px; /* высота элСмСнта */
border-radius: 100%; /* опрСдСляСм Ρ„ΠΎΡ€ΠΌΡƒ ΡƒΠ³Π»ΠΎΠ² элСмСнта (скругляСм) */
display: inline-block; /* устанавливаСм элСмСнты ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½ΠΎ-строчныС (выстраиваСм Π² Π»ΠΈΠ½Π΅ΠΉΠΊΡƒ) */
color: white; /* Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
padding: 15px; /* Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы элСмСнта со всСх сторон */
position: relative; /* ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (для возмоТности смСщСния Π²ΠΎ врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ) */
text-align: center; /* Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅ΠΌ тСкст ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ */
line-height: 50px; /* устанавливаСм высоту строки */
animation-duration: 1.5s; /* Π·Π°Π΄Π°Ρ‘ΠΌ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 1,5 сСкунды */
animation-name: iliketomoveit; /* Π·Π°Π΄Π°Ρ‘ΠΌ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
}
.test {
animation-iteration-count: 1; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ 1 Ρ€Π°Π· */
} 
.test2 {
animation-iteration-count: 2; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ 2 Ρ€Π°Π·Π° */
} 
.test3 {
animation-iteration-count: 3.5; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ 3 с ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½ΠΎΠΉ Ρ€Π°Π·Π° */
}
.test4 {
animation-iteration-count: infinite; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ бСсконСчно */
}
@keyframes iliketomoveit { 
	0%   {top: 0px;} /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	25%  {top: 200px; background: red;} /* 25% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	75%  {top: 100px;} /* 75% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 
	100% {top: 0px; background: black;} /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
} 
</style>
</head>
	<body>
		<a href = "javascript:window.location.reload()">ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄ просмотром</a></br>
		<div class = "test">1</div>
		<div class = "test2">2</div>
		<div class = "test3">3.5</div>
		<div class = "test4">infinite</div>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства top смСщаСм элСмСнты с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, измСняя ΠΏΡ€ΠΈ этом Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° элСмСнта.

Π‘ использованиСм сСлСктора класса ΠΈ свойства animation-iteration-count ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ количСство ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Π½ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° Ρƒ элСмСнтов.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ размСстили ссылку, которая ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ страницы с использованиСм URL псСвдопротокола javascript:, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ языка программирования JavaScript Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. НС смотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ это Ρ€Π΅ΡˆΠ°Π΅Ρ‚ Π½Π°ΡˆΡƒ Π·Π°Π΄Π°Ρ‡Ρƒ ΠΏΠΎ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ URL псСвдопротокол javascript: Π½Π° своих страницах. Π’Π°ΠΊ ΠΊΠ°ΠΊ эта Ρ‚Π΅ΠΌΠ° Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Ρ€Π°ΠΌΠΊΠΈ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΈ изучСния CSS Π² Ρ†Π΅Π»ΠΎΠΌ, ΠΌΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Π² настоящСС врСмя Π½Π° этом ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 193 ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² CSS.

Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

CSS свойство animation-delay опрСдСляСт Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ для запуска Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ задаСтся Π² сСкундах (s), ΠΈΠ»ΠΈ миллисСкундах (ms).

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 0s (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) для свойства animation-delay, ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ анимация Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ‡Π°Ρ‚ΡŒΡΡ Π±Π΅Π· Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ. Если ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ, Ρ‚ΠΎ анимация Π½Π°Ρ‡Π½Π΅Ρ‚ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π±Π΅Π· Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ, Π½ΠΎ со смСщСниСм Ρ€Π°Π²Π½ΠΎΠΌΡƒ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ (Ρ‚.Π΅. Ссли Π²Ρ‹ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ -5s, Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ воспроизвСдСна Π±Π΅Π· Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈ с Ρ‚ΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ ΠΎΠ½Π° ΡƒΠΆΠ΅ длится 5 сСкунд). ДопускаСтся ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, пСрСчислСнных Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ (для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ).

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ</title>
<style>
div {
width: 75px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
height: 75px; /* высота элСмСнта */
border-radius: 100%; /* опрСдСляСм Ρ„ΠΎΡ€ΠΌΡƒ ΡƒΠ³Π»ΠΎΠ² элСмСнта */
position: relative; /* элСмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */
animation-name: iliketomoveit; /* Π·Π°Π΄Π°Ρ‘ΠΌ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
animation-duration: 5s; /* Π·Π°Π΄Π°Ρ‘ΠΌ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
animation-iteration-count: infinite; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ бСсконСчно  */
}
.test {
animation-delay: -500ms; /* устанавливаСм ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ€Π°Π²Π½ΡƒΡŽ -500ms (Π±Π΅Π· Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ со смСщСниСм)  */ 
}
.test2 {
animation-delay: 1500ms; /* устанавливаСм Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ€Π°Π²Π½ΡƒΡŽ 1500 миллисСкунд */ 
}
.test3 {
animation-delay: 2s; /* устанавливаСм Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ€Π°Π²Π½ΡƒΡŽ 2 сСкунды */ 
}
@keyframes iliketomoveit {
	0%   {left: 0px;} /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	25%  {left: 400px; background: red;} /* 25% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	75%  {left: 200px;} /* 75% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */  
	100% {left: 0px; background: black;} /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
} 
</style>
</head>
	<body>
		<a href = "javascript:window.location.reload()">ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄ просмотром</a></br>	
		<div class = "test">-500ms</div>
		<div class = "test2">1500ms</div>
		<div class = "test3">2s</div>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства left смСщаСм элСмСнты с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, измСняя ΠΏΡ€ΠΈ этом Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° элСмСнта.

Π‘ использованиСм сСлСктора класса ΠΈ свойства animation-delay ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ для запуска Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 194 Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² CSS.

Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

По Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ с ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½Ρ‹ΠΌΠΈ эффСктами (transition) допускаСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΡ€ΠΈΠ²ΡƒΡŽ скорости для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (матСматичСская функция — кубичСская кривая Π‘Π΅Π·ΡŒΠ΅). ΠšΡ€ΠΈΠ²Π°Ρ скорости задаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства animation-timing-function ΠΈ опрСдСляСт врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ€ стилСй CSS Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства прСдставлСны Π½ΠΈΠΆΠ΅ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
easeΠ­Ρ„Ρ„Π΅ΠΊΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ начинаСтся ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, Π·Π°Ρ‚Π΅ΠΌ Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ускоряСтся ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΎΠΏΡΡ‚ΡŒ замСдляСтся. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ эквивалСнтно cubic-bezier(0.25,0.1,0.25,1). Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
linearΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ эквивалСнтно cubic-bezier(0,0,1,1). Π’ΠΎΡ‡ΠΊΠ° 1 располоТСна Π½Π° 0 ΠΏΠΎ оси X ΠΈ ΠΏΠΎ оси Y, Ρ‚ΠΎΡ‡ΠΊΠ° 2 β€” Π½Π° 1 ΠΏΠΎ оси X ΠΈ ΠΏΠΎ оси Y.
ease-inΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ старта. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ эквивалСнтно cubic-bezier(0.42,0,1,1).
ease-outΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠ΅ΠΌ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ эквивалСнтно cubic-bezier(0,0,0.58,1).
ease-in-outΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ старта ΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠ΅ΠΌ (симмСтричная кривая Π‘Π΅Π·ΡŒΠ΅). Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ эквивалСнтно cubic-bezier(0.42,0,0.58,1). Π’ΠΎΡ‡ΠΊΠ° 1 располоТСна Π½Π° 0,42 ΠΏΠΎ оси X ΠΈ Π½Π° 0 ΠΏΠΎ оси Y, Ρ‚ΠΎΡ‡ΠΊΠ° 2 β€” Π½Π° 0,58 ΠΏΠΎ оси X ΠΈ Π½Π° 1 ΠΏΠΎ оси Y.
cubic-bezier(n,n,n,n)ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ значСния Π² кубичСской Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π‘Π΅Π·ΡŒΠ΅. Она допускаСт 4 числовых значСния ΠΎΡ‚ 0 Π΄ΠΎ 1. ΠŸΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π²Π° значСния β€” ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ X ΠΈ Y ΠΏΠ΅Ρ€Π²ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ, Π° Π²Ρ‚ΠΎΡ€Ρ‹Π΅ Π΄Π²Π° значСния β€” ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ X ΠΈ Y Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ). На Π΄Π°Π½Π½ΠΎΠΌ сайтС Π²Ρ‹ смоТСтС ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ для Вас значСния.
steps(int,start|end)Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, с двумя ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π·Π°Π΄Π°Π΅Ρ‚ число ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠ² Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ (Ρ†Π΅Π»ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ число (большС 0). Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ являСтся Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ значСния «start» ΠΈΠ»ΠΈ «end» ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΡ‡ΠΊΡƒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ происходит Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°. Если Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΎΠΏΡƒΡ‰Π΅Π½, Ρ‚ΠΎ присваиваСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ «end». Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ «start» осущСствляСт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ шага, Π° «end» Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ шага.
step-startΠ—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ эквивалСнтно steps(1, start). Бвойство сразу ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ шага Π² ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΌ ΠΊΠ°Π΄Ρ€Π΅.
step-endΠ—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ эквивалСнтно steps(1, end). Бвойство ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½Ρ†Π΅ шага.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ссли для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Ρ‘ нСпосрСдствСнно Π² стилях этого ΠΊΠ°Π΄Ρ€Π°:

@keyframes iliketomoveit {
	0%   {left: 0px;}  
	25%  {left: 400px; animation-timing-function: linear ;} /* опрСдСляСм ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ для Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° */  
	75%  {left: 200px;}  
	100% {left: 0px;}  
} 

НСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Ρ… для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ. КаТдоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² этом случаС соотвСтствуСт ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

animation-name: "animationName1, animationName2, animationName3";
animation-timing-function: "linear, ease, ease-in";

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ для дСмонстрации рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊ элСмСнтам Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΡ€ΠΈΠ²Ρ‹Ρ… скорости:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² CSS</title>
<style>
div {
width: 45px; /* ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта */
height: 45px; /* высота элСмСнта */
color: white; /* Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π±Π΅Π»Ρ‹ΠΉ */
background: green; /* Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
margin-bottom: 5px; /* внСшний отступ ΠΎΡ‚ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края элСмСнта */
position: relative; /* элСмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */
animation-name: iliketomoveit; /* Π·Π°Π΄Π°Ρ‘ΠΌ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
animation-duration: 5s; /* Π·Π°Π΄Π°Ρ‘ΠΌ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
animation-iteration-count: infinite; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ бСсконСчно  */
}
.test {
timing-function: ease; /* эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ начинаСтся ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, Π·Π°Ρ‚Π΅ΠΌ Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ускоряСтся ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΎΠΏΡΡ‚ΡŒ замСдляСтся  */
}
.test2 {
timing-function: linear; /* эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° */ 
}
.test3 {
timing-function: ease-in; /* эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ старта */ 
}
.test4 {
timing-function: ease-out; /* эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠ΅ΠΌ */ 
}
.test5 {
timing-function: ease-in-out; /* эффСкт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ стартом ΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠ΅ΠΌ */ 
}
.test6 {
timing-function: cubic-bezier(.94,.06,.83,.67); /* ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ значСния Π² кубичСской Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π‘Π΅Π·ΡŒΠ΅ */ 
}
@keyframes iliketomoveit {
	0%   {left: 0px ;} /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	25%  {left: 400px ;} /* 25% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	75%  {left: 200px ;} /* 75% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	100% {left: 0px ;} /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
}
</style>
</head>
	<body>
		<div class = "test">ease</div>
		<div class = "test2">linear</div>
		<div class = "test3">ease-in</div>
		<div class = "test4">ease-out</div>
		<div class = "test5">ease-in-out</div>
		<div class = "test6">cubic-bezier</div>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства left смСщаСм элСмСнты с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ.

Π‘ использованиСм сСлСктора класса ΠΈ свойства animation-timing-function ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½ΡƒΡŽ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π‘Ρ‹Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова свойства ΠΊΠ°ΠΊ: ease, linear, ease-in, ease-out, ease-in-out ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Π΅ (ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅) значСния Π² кубичСской Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π‘Π΅Π·ΡŒΠ΅.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 195 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования CSS свойства animation-timing-function.

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ пошаговой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ пошаговой анимация Π² CSS</title>
<style>
div {
width: 70px; /* устанавливаСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠΊΠ° */
height: 70px; /* устанавливаСм высоту Π±Π»ΠΎΠΊΠ° */
color: white; /* устанавливаСм Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π±Π΅Π»Ρ‹ΠΉ */
background: green; /* устанавливаСм Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */
margin-bottom: 5px; /* устанавливаСм отступ ΠΎΡ‚ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края элСмСнта */
position: relative; /* элСмСнт с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */
animation-name: iliketomoveit; /* Π·Π°Π΄Π°Ρ‘ΠΌ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (соотвСтствуСт ΠΈΠΌΠ΅Π½ΠΈ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠΌΡƒ Π² ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π°Ρ…)  */
animation-duration: 5s; /* Π·Π°Π΄Π°Ρ‘ΠΌ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
animation-iteration-count: infinite; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ анимация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ бСсконСчно  */
}
.test {
animation-timing-function: steps(3, end); /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ  */ 
}
.test2 {
animation-timing-function: steps(3, start); /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ */ 
}
.test3 {
animation-timing-function: step-start; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ - эквивалСнт steps(1, start) */ 
}
.test4 {
animation-timing-function: step-end; /* ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ - steps(1, end) */ 
}
@keyframes iliketomoveit {
	0%   {left: 0px;} /* Π½Π°Ρ‡Π°Π»ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */
	25%  {left: 400px;} /* 25% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 
	75%  {left: 200px;} /* 75% ΠΎΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */  
	100% {left: 0px;} /* ΠΊΠΎΠ½Π΅Ρ† Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ 
}
</style>
</head>
	<body>
		<div class = "test">steps(3, end)</div>
		<div class = "test2">steps(3, start)</div>
		<div class = "test3">step-start</div>
		<div class = "test4">step-end</div>
	</body>
</html>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создали ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства left смСщаСм элСмСнты с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ.

Π‘ использованиСм сСлСктора класса ΠΈ свойства animation-timing-function ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ Π½Π° ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΎ 3 шага (Π½Π°Ρ‡Π°Π»ΠΎ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°/ΠΊΠΎΠ½Π΅Ρ† Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°), Π»ΠΈΠ±ΠΎ 1 шаг (Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°/ΠΊΠΎΠ½Π΅Ρ† Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°) для Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ step-start ΠΈ step-end.

Π“Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΏΡ€ΠΈ использовании ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Ρ‡Ρ‚ΠΎ количСство шагов, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ устанавливаСтся Π½Π° ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€, Π° Π½Π΅ Π½Π° всю Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ носит большС Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π° Π½Π΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ, ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² постСпСнном Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ элСмСнта, ΠΈΠ»ΠΈ Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ часы.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 196 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ β€” ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ CSS

Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ с Π²Π°ΠΌΠΈ рассмотрСли восСмь Ρ€Π°Π·Π½Ρ‹Ρ… свойств для CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Если Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· Π½ΠΈΡ… Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ строкС, Π΄Π° Π΅Ρ‰Π΅ ΠΈ Π½Π΅ Π·Π°Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎ Π²Π΅Π½Π΄ΠΎΡ€Π½Ρ‹Π΅ прСфиксы, Ρ‚ΠΎ Π² ΠΎΠ±Ρ‰Π΅ΠΉ слоТности получится Π±ΠΎΠ»Π΅Π΅ 30 строк ΠΊΠΎΠ΄Π° для ΠΎΠ΄Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ!

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ ΠΈ Π² случаС с transition, Π² CSS Π΅ΡΡ‚ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ свойство animation, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ сразу всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΉ строкС, раздСляя ΠΈΡ… ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ. Для наглядности Π½ΠΈΠΆΠ΅ прСдставлСны Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΉ записи всСх свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (для экономии мСста ΠΌΡ‹ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π»ΠΈ Π² наш ΠΏΡ€ΠΈΠΌΠ΅Ρ€ прСфиксы ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ, Π½ΠΎ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ ΠΈΡ… понадобится Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ):


div {
    animation-name: coolAnimation;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-delay: 500ms;
    animation-iteration-count: 6;
    animation-direction: reverse;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

/* Π‘Ρ‚ΠΈΠ»ΡŒ Π²Ρ‹ΡˆΠ΅ эквивалСнтСн ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ: */

div {
    animation: coolAnimation 3s ease-in 500ms 6 reverse forwards paused;
}

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, Π½Π΅Ρ‚ нСобходимости ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· восьми свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, вСдь ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²Π° β€” animation-name ΠΈ animation-duration. И Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ (ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, animation-iteration-count), Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ запись:


div {
    animation: coolAnimation 3s 6;
}

Если Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ элСмСнту сразу нСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΠΌ Ρ€Π°Π·Π½Ρ‹Π΅ настройки, Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π³Ρ€ΡƒΠΏΠΏΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ слСдуСт ΠΎΡ‚Π΄Π΅Π»ΡΡ‚ΡŒ запятой, Π° Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ с запятой:


div {
    animation: firstAnimation 300ms ease-in,
               secondAnimation 1s linear alternate;
}

Π”Π°Π»Π΅Π΅ Π² ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ΅ вас ΠΆΠ΄Π΅Ρ‚ большой практичСский ΡƒΡ€ΠΎΠΊ ΠΏΠΎ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π³Π΄Π΅ ΠΌΡ‹ потрСнируСмся Π² трансформации элСмСнтов с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ свойства transform, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ CSS-ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ transition, Ρ‚Π°ΠΊ ΠΈ Π±ΠΎΠ»Π΅Π΅ слоТныС Π²Π΅Ρ‰ΠΈ с использованиСм свойства animation.

15 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов CSS3-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ слоТной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ Π² Ρ‚Ρ€ΡƒΠ΄ΠΎΠ΅ΠΌΠΊΠΈΠΉ процСсс, ΠΈ здСсь пригодятся Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ приводится ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS3.


Magic CSS3 Animations β€” это ΠΏΠ°ΠΊΠ΅Ρ‚ CSS3-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ со спСцэффСктами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ свободно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π»ΡŽΠ±Ρ‹Ρ… Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². ΠŸΡ€ΠΎΡΡ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ ΡΡ‚ΠΈΠ»ΡŒ CSS magic.css ΠΈΠ»ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ magic.min.css.


CSS3 Animation Cheat Sheet прСдставляСт собой Π½Π°Π±ΠΎΡ€ прСдустановлСнной plug-and-play Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². Для Π΅Π³ΠΎ использования Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стили Π½Π° сайт ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½Ρ‹Π΅ классы CSS ΠΊ элСмСнтам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. CSS3 Animation Cheat Sheet ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх послСдних вСрсиях Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² (Π² Ρ‚ΠΎΠΌ числС Π² IE 10).


CSS3 Keyframes Animation Generator прСдставляСт собой ΠΎΠ½Π»Π°ΠΉΠ½-инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes.


Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ΠΌΠ½ΠΎΠ³ΠΈΠ΅ эффСкты CSS. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ рассортированы ΠΏΠΎ нСскольким катСгориям (магия, пСрспСктива, Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅, ΠΌΠ΅Ρ€Ρ†Π°Π½ΠΈΠ΅, статика, слайды, CSS3 анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ), ΠΈ всС ΠΎΠ½ΠΈ довольно красивыС. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΈΠΌΠ΅Π΅Ρ‚ свои собствСнныС классы. Π‘Π°ΠΌΡ‹ΠΉ простой способ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… β€” Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ эти классы ΠΊ Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтам Ρ‡Π΅Ρ€Π΅Π· JavaScript.


Animate.css прСдоставляСт Π½Π°Π±ΠΎΡ€ кросс-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹Ρ… эффСктов CSS3-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для привлСчСния внимания, создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° основС появлСния ΠΈ исчСзновСния элСмСнтов.


Π­Ρ‚ΠΎ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° для создания динамичСской Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ прСсСт. ПослС этого Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ URL-адрСс ΠΈΠ»ΠΈ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ CSS3 ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ².


Hover.CSS β€” полСзная коллСкция эффСктов Π½Π° CSS3, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ для ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°ΠΌ, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ изобраТСниям ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Для использования ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ достаточно ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ эффСкта Π² CSS ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ссылку Π½Π° Π΅Π³ΠΎ Ρ„Π°ΠΉΠ» стилСй.


AniJS β€” это дСкларативная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° для создания CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, которая позволяСт ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ ΠΈ ΠΎΠ±ΠΎΠ³Π°Ρ‚ΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ. Она ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π° ΠΈ проста Π² использовании.


ProgressJs β€” это JavaScript ΠΈ CSS3 Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, которая ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ (прогрСсс-Π±Π°Ρ€Π°ΠΌΠΈ). Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ собствСнный шаблон для прогрСсс-Π±Π°Ρ€Π° ΠΈΠ»ΠΈ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ.


Keyframer β€” это ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ CSS3 Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. Кeyframer довольно прост Π² использовании. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ шкалС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ CSS-стили для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Или ΠΊΠ½ΠΎΠΏΠΊΡƒ с крСстиком, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΊΠ°Π΄Ρ€.


Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ для простого создания CSS3-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. НуТно Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π΅, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ сгСнСрированный CSS-ΠΊΠΎΠ΄ ΠΈ всС Π³ΠΎΡ‚ΠΎΠ²ΠΎ!


CSSketch β€” это Sketch 3 ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт быстро ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½, вкладывая Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй. Он ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ язык стилСй {less}. Благодаря этому Π²Ρ‹ смоТСтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅. CSSketch β€” это ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС с ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ внСсти свой Π²ΠΊΠ»Π°Π΄ Π² Π΅Π³ΠΎ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅.


JQuery-ΠΏΠ»Π°Π³ΠΈΠ½ для создания Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ подсвСтки ΠΈ CSS3 Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ„ΠΎΠ½Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ (ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€), эффСкт (Ρ†Π²Π΅Ρ‚, ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅) ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ‚Π°ΠΉΠΌΠ΅Ρ€ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ.


Π­Ρ‚ΠΎ срСдство для тСстирования отказоустойчивости (постСпСнной Π΄Π΅Π³Ρ€Π°Π΄Π°Ρ†ΠΈΠΈ) ΠΊΠΎΠ΄Π° CSS3. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Ρ‹ смоТСтС ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π²Π΅Π±-страница Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² IE 6-8 вСрсии.


GFX β€” это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° 3D CSS3 Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, которая Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ JQuery нСсколькими ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ функциями для ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ создания CSS3 ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° setTimeout.

Данная публикация прСдставляСт собой ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«15 Best CSS3 Animation Tools for DevelopersΒ» , ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄Ρ€ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.Ρ€Ρƒ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *