Π Π°Π·Π½ΠΎΠ΅

Css3 animation: CSS3-анимация (свойство animation)

11.04.2021

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

ИспользованиС CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ β€” CSS | MDN

Experimental

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

CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ CSS стилСй ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΉ. CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ состоят ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²: стилСвоС описаниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π½Π°Π±ΠΎΡ€ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ², ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΡ… Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠ΅ состояниС Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… стилСй.

Π•ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ прСимущСства CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΌΠΈ способами:

  1. ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° использования для простых Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ; Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π½Π΅ зная JavaScript.
  2. Анимации Π±ΡƒΠ΄ΡƒΡ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Ρ€Π΅Π½Π½Ρ‹Ρ… Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ°Ρ… систСмы. ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° JavaScript, Ссли ΠΎΠ½ΠΈ ΠΏΠ»ΠΎΡ…ΠΎ написаны, часто Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ ΠΏΠ»ΠΎΡ…ΠΎ. Π”Π²ΠΈΠΆΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ frame-skipping ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π½Π° Ρ‚Π°ΠΊΠΎΠΌ высоком ΡƒΡ€ΠΎΠ²Π½Π΅ .
  3. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‚Π΅ΠΌ самым оптимизируя ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. НапримСр, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ частоту обновлСния ΠΊΠ°Π΄Ρ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² нСпросматриваСмых Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ….

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΡΡ‚ΠΈΠ»ΡŒ элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, свойство animation ΠΈΠ»ΠΈ Π΅Π³ΠΎ подсвойства. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π’Π°ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ускорСниС ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π΄Π΅Ρ‚Π°Π»ΠΈ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ анимация Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡ€ΠΎΡ‚Π΅ΠΊΠ°Ρ‚ΡŒ. Π­Ρ‚ΠΎ Π½Π΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π’Π°ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ настраиваСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ @keyframes

(en-US), рассматриваСмой Π΄Π°Π»Π΅Π΅ Π² ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ².

Бвойство animation ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ подсвойства:

animation-name
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ имя @keyframes (en-US), Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΊΠ°Π΄Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
animation-duration
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ врСмя, Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ ΠΎΠ΄ΠΈΠ½ Ρ†ΠΈΠΊΠ» Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
animation-timing-function
НастраиваСт ускорСниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
animation-delay
НастраиваСт Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ элСмСнта ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π½Π°Ρ‡Π°Π»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
animation-iteration-count
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ количСство ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ; Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ infinite для бСсконСчного повторСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
animation-direction
Π”Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ΄Ρ‚ΠΈ ΠΏΠΎ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌΡƒ ΠΏΡƒΡ‚ΠΈ, Π»ΠΈΠ±ΠΎ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ всС значСния ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ.
animation-fill-mode
НастраиваСт значСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Π΄ΠΎ ΠΈ послС исполнСния.
animation-play-state
ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΏΡ€ΠΈΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ Π²ΠΎΠ·ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ.

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ настроили Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ свойства (ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, ускорСниС) Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ дСлаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π²ΡƒΡ… ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² послС

@keyframes (en-US). ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠ°Π΄Ρ€ описываСт, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт Π² Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚.

Π’ Ρ‚ΠΎ врСмя, ΠΊΠ°ΠΊ Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Ρ…арактСристики (ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ) ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² стилях для Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ элСмСнта, ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ percentage, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡΡ‚Π°Π΄ΠΈΡŽ протСкания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. 0% ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π½Π°Ρ‡Π°Π»ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π° 100% Π΅Π΅ ΠΊΠΎΠ½Π΅Ρ†. Π’Π°ΠΊ ΠΊΠ°ΠΊ эти значСния ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Ρ‹, Ρ‚ΠΎ для Π½ΠΈΡ… ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ слова: from ΠΈ to.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹, Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€ΠΈΠ·ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠ΅ состояниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΠΈΠΆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ прСфиксов для CSS стилСй . Webkit-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈ старыС вСрсии Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½ΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π² ΡƒΠΊΠ°Π·Π°Π½ΠΈΠΈ прСфиксов Π² CSS стилях. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Π² своСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚Π°ΠΊΠΆΠ΅ содСрТат прСфиксы -webkit-.

БкольТСниС тСкста

Π­Ρ‚ΠΎΡ‚ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅Ρ‚ скольТСниС тСкста Π² элСмСнтС <p> ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ анимация ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ страницу ΡˆΠΈΡ€Π΅, Ρ‡Π΅ΠΌ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π­Ρ‚ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ, помСстив элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈ установив Π΅ΠΌΡƒ свойство

overflow: hidden.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Π’ стилС для элСмСнта <p> с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства animation-duration ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Ρ‡Ρ‚ΠΎ исполнСниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π½ΡΡ‚ΡŒ 3 с , ΠΈ Ρ‡Ρ‚ΠΎ имя для  @keyframes (en-US), ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰Π΅ΠΉ саму Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ Β«slideinΒ».

Π’ элСмСнт <p> ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ стили, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°ΠΊ-Ρ‚ΠΎ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ Π΅Π³ΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎ здСсь ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes (en-US). Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π°. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡ€ΠΈ 0% Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (from). Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ ΠΏΡ€ΠΈΠ΄Π°Π΅ΠΌ элСмСнту Π»Π΅Π²Ρ‹ΠΉ отступ Π² 100% ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² 300% (Π² Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π° большС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта). Π­Ρ‚ΠΎ становится ΠΏΡ€ΠΈΡ‡ΠΈΠ½ΠΎΠΉ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΊΠ°Π΄Ρ€Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ <p> находится Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° .

Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ (to) опрСдСляСт ΠΊΠΎΠ½Π΅Ρ† Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‚.Π΅ (100%). Π›Π΅Π²Ρ‹ΠΉ отступ устанавливаСтся Ρ€Π°Π²Π½Ρ‹ΠΌ 0, Π° ΡˆΠΈΡ€ΠΈΠ½Π° 100%. ВсС выглядит Ρ‚Π°ΠΊ, Π±ΡƒΠ΄Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ <p>

ΠΏΡ€ΠΈΠΏΠ»Ρ‹Π²Π°Π΅Ρ‚ ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

(ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ CodePen, Ρ‡Ρ‚ΠΎΠ±Ρ‹ воспроизвСсти Π΅Π΅ Π² ΠΎΠΊΠ½Π΅ CodePen)

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ²

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π‘ΠΊΠ°ΠΆΠ΅ΠΌ, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ увСличивался ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ продвиТСния Π²Π»Π΅Π²ΠΎ, Π° ΠΏΠΎΡ‚ΠΎΠΌ возвращался ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ . Π­Ρ‚ΠΎ Π»Π΅Π³ΠΊΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°:

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Π­Ρ‚ΠΎ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ 75% выполнСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΡˆΡ€ΠΈΡ„Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ 300%, Π° ΡˆΠΈΡ€ΠΈΠ½Π° 150%.

(ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ CodePen, Ρ‡Ρ‚ΠΎΠ±Ρ‹ воспроизвСсти Π΅Π΅ Π² ΠΎΠΊΠ½Π΅ CodePen)

Настройка повторСния

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅, Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойство animation-iteration-count ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΠΌΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ€Π°Π²Π½ΠΎΠ΅ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ количСству ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ . Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС Π΄Π°Π²Π°ΠΉΡ‚Π΅ установим Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ infinite для бСсконСчного повторСния:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Π”Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ тСкста Π²ΠΏΡ€Π°Π²ΠΎ ΠΈ Π²Π»Π΅Π²ΠΎ

Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ настроили ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅, Π½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ Π½Π΅Ρ‡Ρ‚ΠΎ странноС: Ρ‚Скст ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΈ снова Β«Π·Π°ΠΏΡ€Ρ‹Π³ΠΈΠ²Π°Π΅Ρ‚Β» Π·Π° ΠΊΡ€Π°ΠΉ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π’ΠΎ, Ρ‡Π΅Π³ΠΎ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‚Π°ΠΊ это Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст двигался Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ. Π­Ρ‚ΠΎΠ³ΠΎ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ установки свойству animation-direction значСния alternate:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

ИспользованиС ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄ΠΎΠ²

Π¨ΠΎΡ€Ρ‚ΠΊΠΎΠ΄ animation ΠΏΠΎΠ»Π΅Π·Π΅Π½ для экономии мСста Π² ΠΊΠΎΠ΄Π΅. НапримСр, ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π°:

p {
  animation: 3s infinite alternate slidein;
}

Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± этом Π½Π° страницС Ρ€Π°Π·Π΄Π΅Π»Π° animation 

Установка Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойствам Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ  

CSS свойство Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… запятыми. Π­Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π΅ ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, число ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ ΠΈ Ρ‚.Π΄., для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ. Рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ.

Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ свойства ΠΈΠΌΠ΅Π½ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ установлСны Ρ‚Ρ€ΠΈ значСния, Ρƒ свойств ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ количСства ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ  β€” ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ. Π’ этом случаС Ρƒ всСх Ρ‚Ρ€Π΅Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ одинаковая ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ число ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ:

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ установлСны Ρ‚Ρ€ΠΈ значСния для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· свойств. Π’ этом случаС каТдая анимация выполняСтся с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΠΏΠΎ порядку значСниями Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ свойствС, Ρ‚Π°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, fadeInOut ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ 2. 5 с ΠΈ количСство ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ 2, ΠΈ Ρ‚.Π΄.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Π’ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Ρ‚Ρ€ΠΈ значСния ΠΈΠΌΠ΅Π½ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π½ΠΎ Π΄Π²Π° значСния ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ количСства ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ. Π’ случаС, ΠΊΠΎΠ³Π΄Π° количСства Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ нСдостаточно для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, значСния бСрутся цикличСски ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°. НапримСр, Ρƒ fadeInOut Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ 2.5s,  Π° moveLeft300px β€” 5s. ЗначСния ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΈΡΡŒ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ½ΠΈ бСрутся сначала β€” bounce ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ 2.5s. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ количСства ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ (Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ свойства) Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

ИспользованиС событий Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π½Π΅ΠΉ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ событий Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΈ события, прСдставлСнныС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ AnimationEvent (en-US), ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° начинаСтся ΠΈ заканчиваСтся анимация ΠΈΠ»ΠΈ начинаСтся новая итСрация. КаТдоС событиС содСрТит ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ, Π° Ρ‚Π°ΠΊΠΆΠ΅ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, которая Π²Ρ‹Π·Π²Π°Π»Π° событиС.

ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСкст, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ  ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ событии Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π’Π°ΠΊ ΠΌΡ‹ смоТСм ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ CSS

НачнСм с добавлСния CSS. Анимация Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π»ΠΈΡ‚ΡŒΡΡ 3 сСкунды, Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ Β«slideinΒ», Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ 3 Ρ€Π°Π·Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ animation-direction ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»Π΅Π½ΠΎ alternate. Π’ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π°Ρ… @keyframes (en-US) установлСны Ρ‚Π°ΠΊΠΈΠ΅ значСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ отступа, Ρ‡Ρ‚ΠΎ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ΡŒ ΠΏΠΎ экрану.

.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-moz-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
   margin-left: 0%;
   width: 100%;
 }
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
   margin-left: 0%;
   width: 100%;
 }
}
Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° события Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π‘ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JavaScript для отслСТивания всСх Ρ‚Ρ€Π΅Ρ… Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… событий Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ; ΠΌΡ‹ Π²Ρ‹Π·Ρ‹Π²Π°Π΅ΠΌ Π΅Π³ΠΎ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

Π­Ρ‚ΠΎ довольно стандартный ΠΊΠΎΠ΄; Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ element.addEventListener(). ПослСднСС, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ этот ΠΊΠΎΠ΄ β€” это установка класса Β«slideinΒ» для Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ элСмСнта; ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ это, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² нашСм случаС событиС animationstart происходит ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ анимация стартуСт, ΠΈ это происходит Ρ€Π°Π½ΡŒΡˆΠ΅, Ρ‡Π΅ΠΌ исполняСтся наш сцСнарий. Π’Π°ΠΊ ΠΌΡ‹ смоТСм ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Ρ‡Π°Π»ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ посрСдством вставки класса Β«slideinΒ» для Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ элСмСнта.

РСгистрация событий

Бобытия Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ listener(), ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π½ΠΈΠΆΠ΅.

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ прост. Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ слСдит Π·Π° event.type, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚ΠΈΠΏ события, ΠΈ добавляСт элСмСнт <ul>, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π»ΠΎΠ³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ΅Π΄ΡˆΠ΅Π΅ событиС.

Π’Ρ‹Π²ΠΎΠ΄, ΠΊΠΎΠ³Π΄Π° анимация закончится, Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  • Started: elapsed time is 0
  • New loop started at time 3.01200008392334
  • New loop started at time 6.00600004196167
  • Ended: elapsed time is 9.234000205993652

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ врСмя, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π² Π²Ρ‹Π²ΠΎΠ΄Π΅, ΠΈ врСмя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π² стилях, Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ послС окончания ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ Π½Π΅ посылаСтся событиС animationiteration ; вмСсто Π½Π΅Π³ΠΎ посылаСтся событиС animationend.

HTML

Π Π°Π΄ΠΈ ΠΏΠΎΠ»Π½ΠΎΡ‚Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅ΠΌ ΠΊΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML. Π’ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ имССтся Ρ‚Π΅Π³ ul, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈ выводится вся информация:

<body>
  <h2>Watch me move</h2>
  <p>This example shows how to use CSS animations to make <code>p</code> elements
  move across the page.</p>
  <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
  <ul>
  </ul>
</body>

Анимация 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;
}

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Бвойство animation-duration опрСдСляСт, сколько Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π½ΡΡ‚ΡŒ анимация для Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ. Если свойство animation-duration Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ, анимация Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π½ΠΎ 0 сСкундам.

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΡ‚ΠΈΠ»ΡŒ измСнится с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов Β«fromΒ» ΠΈ Β«toΒ» (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдставляСт 0% (Start) ΠΈ 100% (ΠΏΠΎΠ»Π½Ρ‹ΠΉ)).

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любоС количСство ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ стиля.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ измСняСтся Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° элСмСнта < div > ΠΏΡ€ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° 25%, Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ 50% ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° 100%:

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

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

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

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ измСняСтся ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнта <div> ΠΏΡ€ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° 25%, Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ 50% ΠΈ снова ΠΏΡ€ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 100%:

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

/* The animation code */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

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



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

Бвойство animation-delay ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Π½Π°Ρ‡Π°Π»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Π² 2 сСкунды ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°Ρ‡Π°Π»ΠΎΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

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

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½Ρ‹. ΠŸΡ€ΠΈ использовании ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ анимация запускаСтся, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΠΎΠ½Π° ΡƒΠΆΠ΅ воспроизводится Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ N сСкунд.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ анимация начнСтся, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΠΎΠ½Π° ΡƒΠΆΠ΅ ΠΈΠ³Ρ€Π°Π»Π° Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ 2 сСкунд:

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

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
}


Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, сколько Ρ€Π°Π· анимация Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ

Бвойство animation-iteration-count ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, сколько Ρ€Π°Π· Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ анимация.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ 3 Ρ€Π°Π·Π°, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΎΠ½Π° остановится:

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

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«InfiniteΒ» для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ анимация ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π»Π°ΡΡŒ навсСгда:

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

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}


Запуск Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ†ΠΈΠΊΠ»Ρ‹

Бвойство animation-direction ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, слСдуСт Π»ΠΈ воспроизвСсти Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΏΠ΅Ρ€Π΅Π΄, Π½Π°Π·Π°Π΄ ΠΈΠ»ΠΈ Π² Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ†ΠΈΠΊΠ»Π°Ρ….

Бвойство Β«Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈΒ» ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • normal β€” Анимация воспроизводится ΠΊΠ°ΠΊ обычная (Π²ΠΏΠ΅Ρ€Π΅Π΄). Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
  • reverse β€” Анимация воспроизводится Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ (Π½Π°Π·Π°Π΄)
  • alternate β€” Анимация сначала разыгрываСтся Π²ΠΏΠ΅Ρ€Π΅Π΄, Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π·Π°Π΄
  • alternate-reverse β€” Анимация сначала воспроизводится Π½Π°Π·Π°Π΄, Π° Π·Π°Ρ‚Π΅ΠΌ пСрСсылаСтся

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ (Π½Π°Π·Π°Π΄):

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

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-direction: reverse;
}

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ сначала Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΏΠ΅Ρ€Π΅Π΄, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π·Π°Π΄:

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

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ-ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉΒ» для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ анимация сначала ΠΏΡ€ΠΎΠ±Π΅ΠΆΠ°Π»Π° Π½Π°Π·Π°Π΄, Π° Π·Π°Ρ‚Π΅ΠΌ пСрСсылаСт:

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

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate-reverse;
}


Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΊΡ€ΠΈΠ²ΡƒΡŽ скорости Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Бвойство animation-timing-function опрСдСляСт ΠΊΡ€ΠΈΠ²ΡƒΡŽ скорости Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Бвойство «анимация-врСмя-функция» ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • ease β€” Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ запуском, Π° Π·Π°Ρ‚Π΅ΠΌ быстро, Π° Π·Π°Ρ‚Π΅ΠΌ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚ΡŒ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ (это ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
  • linear β€” Π—Π°Π΄Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°
  • ease-in β€” Π—Π°Π΄Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ запуском
  • ease-out β€” Π—Π°Π΄Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ†ΠΎΠΌ
  • ease-in-out β€” Π—Π°Π΄Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ Π½Π°Ρ‡Π°Π»ΠΎΠΌ ΠΈ ΠΊΠΎΠ½Ρ†ΠΎΠΌ
  • cubic-bezier(n,n,n,n) β€” ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ собствСнныС значСния Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ кубичСской Π‘Π΅Π·ΡŒΠ΅

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΡ€ΠΈΠ²Ρ‹Ρ… скорости, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹:

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

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}


Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ€Π΅ΠΆΠΈΠΌΠ° Π·Π°Π»ΠΈΠ²ΠΊΠΈ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Анимация CSS Π½Π΅ влияСт Π½Π° элСмСнт Π΄ΠΎ воспроизвСдСния ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° ΠΈΠ»ΠΈ послС воспроизвСдСния послСднСго ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°. Бвойство «анимация-Ρ€Π΅ΠΆΠΈΠΌ заполнСния» ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ это ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.

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

Бвойство «анимация-Ρ€Π΅ΠΆΠΈΠΌ заполнСния» ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • none β€” Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Анимация Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ стили ΠΊ элСмСнту Π΄ΠΎ ΠΈΠ»ΠΈ послС выполнСния
  • forwards β€” Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ сохранит значСния стиля, Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ послСдним ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ (зависит ΠΎΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ-направлСния ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ-количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ)
  • backwards β€” Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ значСния стиля, Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ (Π² зависимости ΠΎΡ‚ направлСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ), ΠΈ сохранит это Π²ΠΎ врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ-ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ
  • both β€” Анимация Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ ΠΊΠ°ΠΊ Π²ΠΏΠ΅Ρ€Π΅Π΄, Ρ‚Π°ΠΊ ΠΈ Π½Π°Π·Π°Π΄, Ρ€Π°ΡΡˆΠΈΡ€ΡΡ свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ±ΠΎΠΈΡ… направлСниях

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ позволяСт элСмСнту <div> ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ значСния стиля ΠΈΠ· послСднСго ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° ΠΏΡ€ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

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

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ позволяСт элСмСнту <div> ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ значСния стиля, Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ Π΄ΠΎ Π½Π°Ρ‡Π°Π»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (Π²ΠΎ врСмя ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ):

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

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ позволяСт элСмСнту <div> ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ значСния стиля, Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ Π΄ΠΎ Π½Π°Ρ‡Π°Π»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ значСния стилСй ΠΈΠ· послСднСго ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° ΠΏΡ€ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

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

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: both;
}


Анимация Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½Π½ΠΎΠ΅ свойство

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡˆΠ΅ΡΡ‚ΡŒ свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

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

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Π’Π°ΠΊΠΎΠΉ ΠΆΠ΅ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠ°ΠΊ ΠΈ Π²Ρ‹ΡˆΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сокращСнного animation Бвойства:

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

div {
    animation: example 5s linear 2s infinite alternate;
}


Бвойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ пСрСчислСны ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes ΠΈ всС свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS:

Π‘Π²ΠΎΠΉΡΡ‚Π²ΠΎΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
@keyframesΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠΎΠ΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
animationΠ‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½Π½ΠΎΠ΅ свойство для задания всСх свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
animation-delayΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Π½Π°Ρ‡Π°Π»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
animation-directionΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, слСдуСт Π»ΠΈ воспроизвСсти Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΏΠ΅Ρ€Π΅Π΄, Π½Π°Π·Π°Π΄ ΠΈΠ»ΠΈ Π² Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ†ΠΈΠΊΠ»Π°Ρ…
animation-durationΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, сколько Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π½ΡΡ‚ΡŒ анимация для Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π°
animation-fill-modeΠ—Π°Π΄Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ элСмСнта, Ссли анимация Π½Π΅ воспроизводится (Π΄ΠΎ Π½Π°Ρ‡Π°Π»Π°, послС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΈ Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅)
animation-iteration-countΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, сколько Ρ€Π°Π· Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ анимация
animation-nameΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ @keyframes
animation-play-stateΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° Π»ΠΈ анимация ΠΈΠ»ΠΈ приостановлСна
animation-timing-functionΠ—Π°Π΄Π°Π΅Ρ‚ ΠΊΡ€ΠΈΠ²ΡƒΡŽ скорости Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

CSS3 | Анимация

Анимация

ПослСднСС обновлСниС: 06. 11.2016

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

Анимация опираСтся Π½Π° ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΡŽ смСну ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² (keyframes). ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ опрСдСляСт ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ€ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ для Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… свойств. И ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ смСна Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² фактичСски Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ.

По сути ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ Ρ‚Ρƒ ΠΆΠ΅ модСль β€” Ρ‚Π°ΠΊ ΠΆΠ΅ нСявно ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π΄Π²Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π° β€” Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ, Π° сам ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ прСдставляСт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌΡƒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΌΡƒ ΠΊΠ°Π΄Ρ€Ρƒ. ЕдинствСнноС ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ мноТСство ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Ρ… ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ².

Π’ Ρ†Π΅Π»ΠΎΠΌ объявлСниС ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° Π² CSS3 ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ:

@keyframes Π½Π°Π·Π²Π°Π½ΠΈΠ΅_Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ {
	from {
		/* Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ значСния свойств CSS */
	}
	to {
		/* ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹Π΅ значСния свойств CSS */
	}
}

ПослС ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова @keyframes ΠΈΠ΄Π΅Ρ‚ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π—Π°Ρ‚Π΅ΠΌ Π² Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобках ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Π΄Π²Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π°. Π‘Π»ΠΎΠΊ послС ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова from ΠΎΠ±ΡŠΡΠ²Π»ΡΠ΅Ρ‚ΡΡ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€, Π° послС клюСвого слова to Π² Π±Π»ΠΎΠΊΠ΅ опрСдСляСтся ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€. Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° опрСдСляСтся ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ нСсколько свойств CSS, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ Ρ‚ΠΎΠΌΡƒ, ΠΊΠ°ΠΊ создаСтся ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ.

НапримСр, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΡŽ для Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° элСмСнта:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Анимация Π² CSS3</title>
		<style>
			@keyframes backgroundColorAnimation {
				from {
					background-color: red;
				}
				to {
					background-color: blue;
				}
			}
			div{
				width: 100px;
				height: 100px;
				margin: 40px 30px;
				border: 1px solid #333;
				
				background-color: #ccc;
				animation-name: backgroundColorAnimation;
				animation-duration: 2s;
			}
		</style>
    </head>
    <body>
		<div></div>
    </body>
</html>

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС анимация называСтся backgroundColorAnimation. Анимация ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅.

Π­Ρ‚Π° анимация прСдоставляСт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ красного Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΊ синСму. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ послС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Ρ‚ΡŒΡΡ Ρ‚ΠΎΡ‚ Ρ†Π²Π΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ Ρƒ элСмСнта div.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΊ элСмСнту, Ρƒ Π½Π΅Π³ΠΎ Π² стилС примСняСтся свойство animation-name. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этого свойства β€” Π½Π°Π·Π²Π°Π½ΠΈΠ΅ примСняСмой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π’Π°ΠΊΠΆΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства animation-duration Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² сСкундах ΠΈΠ»ΠΈ миллисСкундах. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ β€” это 2 сСкунды.

ΠŸΡ€ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ сразу послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы. Однако ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. НапримСр, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ опрСдСлСния стиля для псСвдокласса :hover ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ запуск Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}
div{
	width: 100px;
	height: 100px;
	margin: 40px 30px;
	border: 1px solid #333;
	background-color: #ccc;
}
div:hover{
				
	animation-name: backgroundColorAnimation;
	animation-duration: 2s;
}

ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ²

Как ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΎΡΡŒ Π²Ρ‹ΡˆΠ΅, анимация ΠΊΡ€ΠΎΠΌΠ΅ Π΄Π²ΡƒΡ… стандартных ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² позволяСт Π·Π°Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ мноТСство ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Ρ…. Для опрСдСлСния ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° примСняСтся ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ этот ΠΊΠ°Π΄Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	25%{
		background-color: yellow;
	}
	50%{
		background-color: green;
	}
	75%{
		background-color: blue;
	}
	to {
		background-color: violet;
	}
}

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС анимация начинаСтся с красного Ρ†Π²Π΅Ρ‚Π°. Π§Π΅Ρ€Π΅Π· 25% Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ†Π²Π΅Ρ‚ мСняСтся Π½Π° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ, Π΅Ρ‰Π΅ Ρ‡Π΅Ρ€Π΅Π· 25% β€” Π½Π° Π·Π΅Π»Π΅Π½Ρ‹ΠΉ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΌ ΠΊΠ°Π΄Ρ€Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сразу нСсколько свойств:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
		opacity: 0.2;
	}
	to {
		background-color: blue;
		opacity: 0.9;
	}
}

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ нСсколько ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… вмСстС:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}
@keyframes opacityAnimation {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 0.9;
	}
}
div{
	width: 100px;
	height: 100px;
	margin: 40px 30px;
	border: 1px solid #333;
	background-color: #ccc;
	
	animation-name: backgroundColorAnimation, opacityAnimation;
	animation-duration: 2s, 3s;
}

Π’ качСствС значСния свойства animation-name Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ Ρƒ свойства animation-duration задаСтся врСмя этих Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ. НазваниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π΅Π΅ врСмя ΡΠΎΠΏΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ анимация opacityAnimation Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π»ΠΈΡ‚ΡŒΡΡ 3 сСкунды.

Π—Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ случаС послС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Ρƒ свойства animation-duration, Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ΡΡ ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Однако с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… свойств ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ это ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.

Π’Π°ΠΊ, свойство animation-iteration-count опрСдСляСт, сколько Ρ€Π°Π· Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ анимация. НапримСр, 3 ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ подряд:

animation-iteration-count: 3;

Если Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ анимация Π·Π°ΠΏΡƒΡΠΊΠ°Π»Π°ΡΡŒ бСсконСчноС количСство Ρ€Π°Π·, Ρ‚ΠΎ этому свойству присваиваСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ infinite:

animation-iteration-count: infinite;

ΠŸΡ€ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ снова с Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°. Но с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства animation-direction: alternate; ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅. Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°, Π° Π·Π°Ρ‚Π΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΊ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΊΠ°Π΄Ρ€Ρƒ:

animation-name: backgroundColorAnimation, opacityAnimation;
animation-duration: 2s, 2s;
animation-iteration-count: 3;
animation-direction: alternate;

ΠŸΡ€ΠΈ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ устанавливаСт для Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» Π±Ρ‹ Π΄ΠΎ примСнСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Но свойство animation-fill-mode: forwards позволяСт Π² качСствС ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ свойства ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±Ρ‹Π»ΠΎ Π² послСднСм ΠΊΠ°Π΄Ρ€Π΅:

animation-name: backgroundColorAnimation;
animation-duration: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;

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

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства animation-delay ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ врСмя Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-delay: 1s;	/* Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π² 1 сСкунду */

Ѐункция плавности Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Как ΠΈ ΠΊ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°ΠΌ, ΠΊ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ всС Ρ‚Π΅ ΠΆΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ плавности:

  • linear: линСйная функция плавности, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ свойства происходит Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ

  • ease: функция плавности, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ анимация ускоряСтся ΠΊ сСрСдинС ΠΈ замСдляСтся ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ, прСдоставляя Π±ΠΎΠ»Π΅Π΅ СстСствСнноС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅

  • ease-in: функция плавности, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ происходит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ускорСниС Π² Π½Π°Ρ‡Π°Π»Π΅

  • ease-out: функция плавности, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ происходит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ускорСниС Π² Π½Π°Ρ‡Π°Π»Π΅

  • ease-in-out: функция плавности, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ анимация ускоряСтся ΠΊ сСрСдинС ΠΈ замСдляСтся ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ, прСдоставляя Π±ΠΎΠ»Π΅Π΅ СстСствСнноС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅

  • cubic-bezier: для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ примСняСтся кубичСская функция Π‘Π΅Π·ΡŒΠ΅

Для установки Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ плавности примСняСтся свойство animation-timing-function:

@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}
div{
	width: 100px;
	height: 100px;
	margin: 40px 30px;
	border: 1px solid #333;
				
	animation-name: backgroundColorAnimation;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
}

Бвойство animation

Бвойство animation являСтся сокращСнным способом опрСдСлСния Π²Ρ‹ΡˆΠ΅ рассмотрСнных свойств:

animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode

ΠŸΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π²Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ. ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ значСния Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹.

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π½Π°Π±ΠΎΡ€ свойств:

animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
animation-direction: alternate;
animation-delay: 1s;
animation-fill-mode: forwards;

Π­Ρ‚ΠΎΡ‚ Π½Π°Π±ΠΎΡ€ Π±ΡƒΠ΄Π΅Ρ‚ эквивалСнтСн ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π±Π°Π½Π½Π΅Ρ€Π° с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ создадим ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π±Π°Π½Π½Π΅Ρ€:

<!DOCTYPE html>
<html>
<head>
	<title>HTML-Π±Π°Π½Π½Π΅Ρ€</title>
	<meta charset="utf-8" />
	<style type="text/css">
	@keyframes text1
	{
		10%{opacity: 1;}
		40%{opacity: 0;}
	}  
	@keyframes text2
	{
		30%{opacity: 0;}
		60%{opacity:1;}
	}
	@keyframes banner
	{
		10%{background-color: #008978;}
		40%{background-color: #34495e;}
		80%{background-color: green;}
	}
	.banner
	{
		width: 600px;
		height: 120px;
		background-color: #777;
		margin: 0 auto;
		position: relative;
	}
	.text1,.text2
	{
		position: absolute;
		width: 100%;
		height: 100%;
		line-height: 120px;
		text-align: center;
		font-size: 40px;
		color: #fff;
		opacity: 0;
	}

	.text1
	{
		animation : text1 6s infinite;
	}

	.text2
	{
		animation : text2 6s infinite;
	}

	.animated
	{
		opacity: 0.8;
		position: absolute;
		width: 100%;
		height: 100%;  
		background-color: #34495e;
		animation: banner 6s infinite;
	}
	</style>
</head>
<body>
	<div>
		<div>
			<div>Волько Π² этом мСсяцС</div>
			<div>Π‘ΠΊΠΈΠ΄ΠΊΠΈ ΠΏΠΎ 20%</div>
		</div>
	</div>
</body>
</html>

Π—Π΄Π΅ΡΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΡΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ Ρ‚Ρ€ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Анимация Β«bannerΒ» измСняСт Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π±Π°Π½Π½Π΅Ρ€Π°, Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ text1 ΠΈ text2 ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ ΠΈ ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ тСкст с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ настроСк прозрачности. Когда ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ тСкст Π²ΠΈΠ΄Π΅Π½, Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π½Π΅ Π²ΠΈΠ΄Π΅Π½ ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚. Π’Π΅ΠΌ самым ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ тСкста Π² Π±Π°Π½Π½Π΅Ρ€Π΅.

Бвойство animation | CSS справочник

CSS свойства

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅

CSS свойство animation позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ всС свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии. Π­Ρ‚ΠΎ свойство являСтся ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΉ записью для ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… свойств:

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


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


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

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

CSS синтаксис:

animation:"name duration timing-function delay iteration-count direction fill-mode play-state"; /* имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΊΠΎΠ½Ρ†Π΅ списка */

JavaScript синтаксис:

object.style.animation = "myAnimation 1s linear"

ЗначСния свойства

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
animation-nameΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ/список Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌΡƒ элСмСнту. КаТдоС имя ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ (@keyframes), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт значСния свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ none.
animation-durationΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, сколько сСкунд ΠΈΠ»ΠΈ миллисСкунд затрачиваСтся Π½Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0.
animation-timing-functionΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΊΡ€ΠΈΠ²ΡƒΡŽ скорости для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ матСматичСская функция β€” кубичСская кривая Π‘Π΅Π·ΡŒΠ΅). ΠšΡ€ΠΈΠ²Π°Ρ скорости опрСдСляСт врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ€ стилСй CSS Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ease.
animation-delayΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ для запуска Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0.
animation-iteration-countΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, сколько Ρ€Π°Π· анимация Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ воспроизвСдСна. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 1.
animation-directionΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ анимация Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, ΠΈΠ»ΠΈ Π² Π²ΠΈΠ΄Π΅ Ρ‡Π΅Ρ€Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ…ΡΡ Ρ†ΠΈΠΊΠ»ΠΎΠ². Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ normal.
animation-fill-modeΠ—Π°Π΄Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится (ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π°, ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ, ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»Π΅Π½Π½ΡƒΡŽ свойством animation-delay ). Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ none.
animation-play-stateΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ состояниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (анимация воспроизводится, Π»ΠΈΠ±ΠΎ приостановлСна). Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ running.

ВСрсия CSS

CSS3

НаслСдуСтся

НСт.

АнимируСмоС

НСт.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования

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

CSS3 анимация ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΅Π΅ использования, бСсконСчный ΠΏΠΎΠ²Ρ‚ΠΎΡ€

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: ΠΏΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ вас, Π΄ΠΎΡ€ΠΎΠ³ΠΎΠΉ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ. БСгодня я Π²Π°ΠΌ расскаТу, ΠΊΠ°ΠΊ рСализовываСтся Π² css3 анимация ΠΈ ΠΊΠ°ΠΊ Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ сСйчас для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… эффСктов Π½Π° сайтС.

Π’ΠΠ˜ΠœΠΠΠ˜Π•! ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ с Π²Π°ΠΌΠΈ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°Ρ… я Π²Π°ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΅Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ смогу, поэтому смСло ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΠΉΡ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ для ΠΊΠΎΠ΄Π° ΠΈ записывайтС Ρ‚ΡƒΠ΄Π° ΠΊΠΎΠ΄, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π² этот ΡΡ‚Π°Ρ‚ΡŒΠ΅.

ΠžΡΠ½ΠΎΠ²Ρ‹ создания

Π˜Ρ‚Π°ΠΊ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ всСго Π½ΡƒΠΆΠ½ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ с Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΅Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ. Π’Ρ‹ навСрняка ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ любая Π²Π΅Ρ‰ΡŒ Π² css рСализуСтся прописываниСм Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ сСлСктору Π½ΡƒΠΆΠ½Ρ‹Ρ… свойств с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями. Π’Π°ΠΊ Π²ΠΎΡ‚, ΠΏΡ€ΠΈ создании Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ этим Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ. Π‘Ρ…Π΅ΠΌΠ° выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Π‘ΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ сами эффСкты ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ @keyframes

НуТному элСмСнту задаСтся эта самая анимация, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ (всС это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств ΠΈ ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ).

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π˜Ρ‚Π°ΠΊ, для Π½Π°Ρ‡Π°Π»Π° Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹Π΅ измСнСния Π² @keyframes, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ, ΠΊΠ°ΠΊ с Π½ΠΈΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Бинтаксис @keyframes

БобствСнно, ΠΌΠ½Π΅ ΠΏΡ€ΠΎΡ‰Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ Π²Π°ΠΌ всС Π½Π° Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, ΠΏΡƒΡΡ‚ΡŒ ΠΈ ΠΎΡ‡Π΅Π½ΡŒ простом. Π’ΠΎΡ‚ ΠΎΠ½ (ΠΊΠΎΠ΄ добавляСтся Π² css-Ρ„Π°ΠΉΠ»):

@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;}} 100%{font-size: 50px;}}

@keyframes pulse{

0%{font-size: 50px;}

50%{font-size: 60px;}}

100%{font-size: 50px;}}

Π˜Ρ‚Π°ΠΊ, послС ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΈΠΊΠ° @keyframes ΠΈΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ΅ слово, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π’ нашСм случаС это β€œpulse”. Π”Π°Π»Π΅Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Π΅ скобки, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°.

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹, это Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΊΠΈ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΊ элСмСнту Π±ΡƒΠ΄ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒΡΡ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ свойства. Π’ нашСм случаС записанноС ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅: Π² самом Π½Π°Ρ‡Π°Π»Π΅ выполнСния Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ 50 пиксСлСй, Π² Π΅Π΅ сСрСдинС ΠΎΠ½ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒΡΡ Π΄ΠΎ 60-Ρ‚ΠΈ, Π° Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΎΠΏΡΡ‚ΡŒ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒΡΡ Π΄ΠΎ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова from ΠΈ to ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΡƒΡŽ запись, ΠΎΠ½ΠΈ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ 0% ΠΈ 100% соотвСтствСнно, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π°Ρ‡Π°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ† воспроизвСдСния.

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π² дСйствии

Пока Ρƒ нас просто ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ эффСкт, Π½ΠΎ ΠΎΠ½ Π½ΠΈΠ³Π΄Π΅ Π½Π΅ примСняСтся. Если Π²Ρ‹ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ Π²Π°ΡˆΡƒ Π²Π΅Π±-страницу, Π½Π° Π½Π΅ΠΉ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ измСнится. БоотвСтствСнно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π΄Π²Π° дСйствия:

Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ элСмСнт, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ

Π‘Π²ΡΠ·Π°Ρ‚ΡŒ Π΅Π³ΠΎ с ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ, описанными Ρ‡Π΅Ρ€Π΅Π· @keyframes (посрСдством ΠΈΠΌΠ΅Π½ΠΈ), Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π΄Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ настройки Ссли это Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.

ΠŸΡ€ΠΎΠ±ΡƒΠ΅ΠΌ

Π’ своСм html-Ρ„Π°ΠΉΠ»Π΅ я создал Π±Π»ΠΎΠΊ с классом shadow, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ располагаСтся простая строка тСкста. Наша Ρ†Π΅Π»ΡŒ – ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ эффСкты, описанныС Π½Π°ΠΌΠΈ Ρ€Π°Π½Π΅Π΅, ΠΊ этому тСкстовому элСмСнту.

Π•ΡΡ‚ΡŒ Π΄Π²Π° ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² Ρ‚Π°ΠΊΠΎΠΌ случаС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, это имя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ писали Π² keyframes. Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, это Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π±Π΅Π· этого ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ просто Π½Π΅ смоТСт Π΅Π΅ воспроизвСсти.

Π˜Ρ‚Π°ΠΊ, ΠΏΠΎΠΌΠΈΠΌΠΎ Ρ‚Π΅Ρ… стилСй, Ρ‡Ρ‚ΠΎ ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ Ρƒ нашСго Π±Π»ΠΎΠΊΠ°, добавляСм Π½ΠΎΠ²Ρ‹Π΅:

animation-name: pulse; animation-duration: 2s;

animation-name: pulse;

animation-duration: 2s;

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ связали элСмСнт с описанной Ρ€Π°Π½Π΅Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π΅Π΅ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу ΠΈ Π²Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ всС ΡƒΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ – наш эффСкт Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ выполнится, Π½ΠΎ всСго лишь ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ количСством ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ, сущСствуСт Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ свойство:

animation-iteration-count: 4;

animation-iteration-count: 4;

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, всС ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒΡΡ 4 Ρ€Π°Π·Π°, послС Ρ‡Π΅Π³ΠΎ ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ. Как Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, вмСсто Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒ любоС число.

БСсконСчная анимация Π² css3

РСализуСтся ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΆΠ΅ свойства. На самом Π΄Π΅Π»Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто Π·Π°Π΄Π΅Ρ‚ΡŒ количСство ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ Π² ΠΏΠ°Ρ€Ρƒ тысяч, этого Π²ΠΏΠΎΠ»Π½Π΅ Ρ…Π²Π°Ρ‚ΠΈΡ‚, Π½ΠΎ тСорСтичСски наша анимация Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ бСсконСчно.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π― Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ бСсконСчных ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊ:

animation-iteration-count: infinite;

animation-iteration-count: infinite;

ВсС, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ сдСлали бСсконСчный ΠΏΠΎΠ²Ρ‚ΠΎΡ€. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Ρ‚Π°ΠΊ Π»ΠΈ это, просидСв всю Тизнь Π·Π° ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠΌ, я Π½Π΅ ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ. ΠŸΡ€ΠΎΡΡ‚ΠΎ это примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эффСкт постоянно повторялся ΠΈ Π½Π΅ исчСзал. Если ΠΎΠ½ нСнавязчивый ΠΈ Π½Π΅ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‚ΠΎ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ ΠΈ Π½Π΅Ρ‚.

Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°Ρ‡Π°Π»ΠΎΠΌ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ воспроизвСдСниС начинаСтся послС ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы. Π­Ρ‚ΠΈΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства animation-delay. Π•Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ задаСтся Π² сСкундах.

НаправлСниС

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ интСрСсноС свойство – animation-direction. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ стоит ΠΊΠ°ΠΊ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅, Ссли ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ reverse, Ρ‚ΠΎ всС описанныС ΠΊΠ°Π΄Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠΌ, Π² Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π°. Для этого я Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» эффСкт, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΊΠ°Π΄Ρ€.

@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;} 70%{font-size: 80px;} 100%{font-size: 50px;}}

@keyframes pulse{

0%{font-size: 50px;}

50%{font-size: 60px;}

70%{font-size: 80px;}

100%{font-size: 50px;}}

Π˜Ρ‚Π°ΠΊ, ΠΏΡ€ΠΈ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒΡΡ Π΄ΠΎ 60 пиксСлСй, ΠΏΠΎΡ‚ΠΎΠΌ ΠΎΠ½ Ρ€Π΅Π·ΠΊΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒΡΡ Π΅Ρ‰Π΅ Ρ€Π°Π·, ΡƒΠΆΠ΅ Π΄ΠΎ 80-Ρ‚ΠΈ, послС Ρ‡Π΅Π³ΠΎ вСрнСтся Π² исходноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

Рис. 2. Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста

Рис. 3. Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎΡ‡Ρ‚ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΠ΅Ρ€Π΅Π΄ Ρ€Π΅Π·ΠΊΠΈΠΌ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ΠΌ ΠΊ исходному ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π·Π°Π΄Π°Π΅ΠΌ:

animation-direction: reverse;

animation-direction: reverse;

ВсС ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΠ»ΠΎΡΡŒ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚. Π‘Π½Π°Ρ‡Π°Π»Π° тСкст ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒΡΡ Π°ΠΆ Π½Π° 30 пиксСлСй, Π΄ΠΎ 80-Ρ‚ΠΈ, ΠΎΡΡ‚Π°Π²ΡˆΡƒΡŽΡΡ Ρ‡Π°ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ»Π°Π²Π½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ, Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ² Π²Π΅Ρ€Π½ΡƒΠ² сСбС ΠΏΡ€Π΅ΠΆΠ½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹. ВсС просто.

Π€ΠΎΡ€ΠΌΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

А это, ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ, ΠΎΠ΄Π½Π° ΠΈΠ· самых интСрСсных настроСк, Π² экспСримСнтах с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²ΠΎΠ·ΠΈΡ‚ΡŒΡΡ Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ всС измСнСния Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ. Π’Π°ΠΊΠΎΠΉ Ρ‚ΠΈΠΏ выполнСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ называСтся Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌ, ΠΊΡ€ΠΎΠΌΠ΅ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅:

animation-timing-function: ease;

animation-timing-function: ease;

Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ начнСтся ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌ ускорится, Π° Π² ΠΊΠΎΠ½Ρ†Π΅ вновь сбавит ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ. ΠšΡ€ΠΎΠΌΠ΅ этого Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ эффСкты: ease-in, ease-out, ease-in-out. ВсС ΠΈΡ… ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Ρƒ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сами ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… ΠΊ элСмСнтам.

БокращСнная запись

Π§Ρ‚ΠΎΠ±Ρ‹ всС Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π² ΠΎΠ΄Π½Ρƒ строку ΠΈ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ ΠΊΡƒΡ‡Ρƒ мСста Π² ΠΊΠΎΠ΄Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠΎΠΊΡ€Π°Ρ‰Π΅Π½Π½ΡƒΡŽ запись:

animation: имя|Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ|Ρ„ΠΎΡ€ΠΌΠ°|Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ°|Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅|число ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ²

animation: имя|Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ|Ρ„ΠΎΡ€ΠΌΠ°|Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ°|Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅|число ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ²

Π― Π΄ΡƒΠΌΠ°ΡŽ, ΠΏΠΎΠΊΠ° Π²Π°ΠΌ Ρ…Π²Π°Ρ‚ΠΈΡ‚ этого для создания своих Ρ‚ΠΎΠ»ΠΊΠΎΠ²Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ. Намного большС здСсь зависит ΠΎΡ‚ вашСй Ρ„Π°Π½Ρ‚Π°Π·ΠΈΠΈ. Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Π½Π΅ слишком ΠΌΠ½ΠΎΠ³ΠΎ свойств Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ красивых Π²Π΅Ρ‰Π΅ΠΉ Π½Π° страницС.

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

Π˜Ρ‚Π°ΠΊ, это Π±Ρ‹Π» ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° css3, Ρ‚Π°ΠΊΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅ Ρ‚ΡƒΡ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΡΡƒΡ‚ΡŒ, Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с синтаксисом @keyframes ΠΈ Ρ‚ΠΎΠ³Π΄Π° Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ ΠΈ Ρƒ вас Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚. Π”Ρ€ΡƒΠ³ΠΈΠ΅ css3 свойства Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Π² этом курсС. ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° наш Π±Π»ΠΎΠ³, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ классныС ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ ΠΏΠΎ ΡΠ°ΠΉΡ‚ΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

PSD to HTML

ВСрстка сайта Π½Π° HTML5 ΠΈ CSS3 с нуля

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

animation | CSS справочник

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

12.0+ 10.0+ 16.0+ 43.0+ 30.0+ 9.0+

ОписаниС

CSS свойство animation позволяСт ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ нСсколько ΠΈΠ»ΠΈ всС значСния свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии.

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

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: none 0 ease 0 1 normal
ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам ΠΈ псСвдо-элСмСнтам ::before ΠΈ ::after
АнимируСтся: Π½Π΅Ρ‚
НаслСдуСтся: Π½Π΅Ρ‚
ВСрсия: CSS3
Бинтаксис JavaScript: object.style.animation=Β»mymove 5s infiniteΒ»

Бинтаксис

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

ЗначСния свойства

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ОписаниС
animation-name Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ имя ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes.
animation-duration ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ сколько сСкунд ΠΈΠ»ΠΈ миллисСкунд понадобится, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚ΡŒ 1 Ρ†ΠΈΠΊΠ» Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
animation-timing-function ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΊΡ€ΠΈΠ²ΡƒΡŽ скорости для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
animation-delay ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, ΠΊΠΎΠ³Π΄Π° запустится анимация.
animation-iteration-count ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ сколько Ρ€Π°Π· анимация Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ.
animation-direction Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ анимация ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π² рСвСрсС Π½Π° Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ†ΠΈΠΊΠ»Π°Ρ….
animation-fill-mode Π—Π°Π΄Π°Ρ‘Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ проигрываСтся (Π΄ΠΎ Π΅Ρ‘ запуска, Π²ΠΎ врСмя остановки ΠΈΠ»ΠΈ послС Π΅Ρ‘ окончания).
animation-play-state Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ анимация ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΈΠ»ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΏΠ°ΡƒΠ·Ρ‹.

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€</title>
  <style>
    div.primer {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: mymove 5s infinite;
    }
    @keyframes mymove {
      from { left:0px; }
      to { left:540px; }
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°:

CSS animation generator: 15 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов CSS3-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

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


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Β» , подготовлСнная Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ


CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

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

CSS

Π’ этой Π³Π»Π°Π²Π΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… свойствах:

  • @keyframes
  • Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  • ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  • Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  • количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  • Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  • функция синхронизации Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  • Ρ€Π΅ΠΆΠΈΠΌ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  • анимация

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Числа Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΡƒΡŽ свойство.

Π˜ΠΌΡƒΡ‰Π΅ΡΡ‚Π²ΠΎ
@keyframes 43,0 10,0 16,0 9,0 30,0
Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 43,0 10,0 16,0 9,0 30.0
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 43,0 10,0 16,0 9,0 30,0
Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 43,0 10,0 16,0 9,0 30,0
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 43,0 10,0 16.0 9,0 30,0
анимация-Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ 43,0 10,0 16,0 9,0 30,0
функция синхронизации Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 43,0 10,0 16,0 9,0 30,0
Ρ€Π΅ΠΆΠΈΠΌ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 43.0 10,0 16,0 9,0 30,0
анимация 43,0 10,0 16,0 9,0 30,0

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

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

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ свойств CSS, сколько Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ Ρ€Π°Π·.

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

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


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

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

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

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Β«ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β» Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ привязываСтся ΠΊ элСмСнту

.Анимация Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π»ΠΈΡ‚ΡŒΡΡ 4 сСкунды, ΠΈ постСпСнно измСнится Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° элСмСнта
ΠΎΡ‚ «красного» Π΄ΠΎ Β«ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎΒ»:

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

/ * Код Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ * /
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ @keyframes {
ΠΈΠ· {background-color: red;}
ΠΊ {background-color: yellow;}
}

/ * Π­Π»Π΅ΠΌΠ΅Π½Ρ‚, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ примСняСтся анимация * /
div {
width: 100px;
высота: 100 пиксСлСй;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 с;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Бвойство animation-duration опрСдСляСт, сколько Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π½ΡΡ‚ΡŒ анимация.Если свойство animation-duration Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ β€” 0 с (0 сСкунд).

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΡ‚ΠΈΠ»ΡŒ измСнится, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова Β«ΠΎΡ‚Β» ΠΈ Β«Π΄ΠΎΒ» (Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ 0% (Π½Π°Ρ‡Π°Π»ΠΎ) ΠΈ 100% (Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΎ)).

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΡ‚ΠΈΠ»ΡŒ мСняСтся ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ измСняСтся Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°

элСмСнт, ΠΊΠΎΠ³Π΄Π° анимация Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° Π½Π° 25%, Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° Π½Π° 50% ΠΈ снова, ΠΊΠΎΠ³Π΄Π° анимация Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° Π½Π° 100%:

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

/ * Код Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ * /
ΠΏΡ€ΠΈΠΌΠ΅Ρ€ @keyframes {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/ * Π­Π»Π΅ΠΌΠ΅Π½Ρ‚, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ примСняСтся анимация * /
div {
ΡˆΠΈΡ€ΠΈΠ½Π°: 100 пиксСлСй;
высота: 100 пиксСлСй;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 с;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, ΠΈ позиция

элСмСнт, ΠΊΠΎΠ³Π΄Π° анимация Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° Π½Π° 25%, Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° Π½Π° 50% ΠΈ снова, ΠΊΠΎΠ³Π΄Π° анимация Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π° Π½Π° 100%:

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

/ * Код Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ * /
ΠΏΡ€ΠΈΠΌΠ΅Ρ€ @keyframes {
0% {background-color: red; слСва: 0px; top: 0px;}
25% {Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ; слСва: 200 пиксСлСй; top: 0px;}
50% {Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: синий; слСва: 200 пиксСлСй; top: 200px;}
75% {Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ; слСва: 0px; top: 200px;}
100% {Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный; слСва: 0px; top: 0px;}
}

/ * Π­Π»Π΅ΠΌΠ΅Π½Ρ‚, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ примСняСтся анимация * /
div {
ΡˆΠΈΡ€ΠΈΠ½Π°: 100 пиксСлСй;
высота: 100 пиксСлСй;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 с;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

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

Бвойство animation-delay опрСдСляСт Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Π½Π°Ρ‡Π°Π»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠ΅Ρ€Π΅Π΄ запуском Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π΄Π°Π½Π° Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π² 2 сСкунды:

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

div {
ΡˆΠΈΡ€ΠΈΠ½Π°: 100 пиксСлСй;
высота: 100 пиксСлСй;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 сСкунды;
Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2 с;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π”ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния. ΠŸΡ€ΠΈ использовании ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ анимация начнСтся Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΠΎΠ½ ΡƒΠΆΠ΅ ΠΈΠ³Ρ€Π°Π» Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ N сСкунд.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ анимация начнСтся Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΠΎΠ½Π° ΡƒΠΆΠ΅ Π±Ρ‹Π»Π° ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π·Π° 2 сСкунды:

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

div {
ΡˆΠΈΡ€ΠΈΠ½Π°: 100 пиксСлСй;
высота: 100 пиксСлСй;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 сСкунды;
анимация-Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ°: -2 с;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, сколько Ρ€Π°Π· анимация Π΄ΠΎΠ»ΠΆΠ½Π° Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ

Бвойство animation-iteration-count опрСдСляСт, сколько Ρ€Π°Π· Π΄ΠΎΠ»ΠΆΠ½Π° Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ анимация.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° 3 Ρ€Π°Π·Π° Π΄ΠΎ Π΅Π΅ остановки:

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

div {
width: 100px;
высота: 100 пиксСлСй;
позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 с;
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«Π±Π΅ΡΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΡΡ‚ΡŒΒ». ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒΡΡ Π²Π΅Ρ‡Π½ΠΎ:

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

div {
ΡˆΠΈΡ€ΠΈΠ½Π°: 100 пиксСлСй;
высота: 100 пиксСлСй;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 с;
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: бСсконСчный;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Анимация запуска Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ с Ρ‡Π΅Ρ€Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Ρ†ΠΈΠΊΠ»ΠΎΠ²

Бвойство animation-direction ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ слСдуСт Π»ΠΈ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΏΠ΅Ρ€Π΅Π΄, Π½Π°Π·Π°Π΄ ΠΈΠ»ΠΈ ΠΏΠΎΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎ Ρ†ΠΈΠΊΠ»Ρ‹.

Бвойство Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ-Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • normal β€” Анимация воспроизводится ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ (Π½Π°ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅). Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
  • reverse β€” Анимация воспроизводится Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ (Π½Π°Π·Π°Π΄)
  • Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ β€” Воспроизводится анимация сначала Π²ΠΏΠ΅Ρ€Π΅Π΄, Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π·Π°Π΄
  • Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎ-ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ β€” Анимация воспроизводится сначала Π½Π°Π·Π°Π΄, Π·Π°Ρ‚Π΅ΠΌ Π²ΠΏΠ΅Ρ€Π΅Π΄

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ анимация Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ (Π½Π°Π·Π°Π΄):

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

div {
ΡˆΠΈΡ€ΠΈΠ½Π°: 100 пиксСлСй;
высота: 100 пиксСлСй;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 сСкунды;
анимация-Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅: ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ рСгрСсс;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉΒ» для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π±Π΅Π³ΠΈ сначала Π²ΠΏΠ΅Ρ€Π΅Π΄, ΠΏΠΎΡ‚ΠΎΠΌ Π½Π°Π·Π°Π΄:

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

div {
ΡˆΠΈΡ€ΠΈΠ½Π°: 100 пиксСлСй;
высота: 100 пиксСлСй;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 с;
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2;
анимация-Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅: Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«alternate-reverseΒ» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. сначала Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π½Π°Π·Π°Π΄, Π·Π°Ρ‚Π΅ΠΌ Π²ΠΏΠ΅Ρ€Π΅Π΄:

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

div {
width: 100px;
высота: 100 пиксСлСй;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 4 с;
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2;
анимация-Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅: Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎ-рСвСрсивный;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΊΡ€ΠΈΠ²ΡƒΡŽ скорости Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Бвойство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ синхронизации Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ опрСдСляСт ΠΊΡ€ΠΈΠ²ΡƒΡŽ скорости анимация.

Бвойство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ-Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ β€” Π·Π°Π΄Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ Π½Π°Ρ‡Π°Π»ΠΎΠΌ, Π·Π°Ρ‚Π΅ΠΌ быстрым, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ΠΌ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
  • linear β€” Π—Π°Π΄Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°
  • easy-in β€” ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ запуском
  • easy-out β€” ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ†ΠΎΠΌ
  • easy-in-out β€” ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ Π½Π°Ρ‡Π°Π»ΠΎΠΌ ΠΈ ΠΊΠΎΠ½Ρ†ΠΎΠΌ
  • cubic-bezier (n, n, n, n) β€” ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π²Π°ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ свои собствСнныС значСния Π² кубичСской Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π‘Π΅Π·ΡŒΠ΅

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΡ€ΠΈΠ²Ρ‹Ρ… скорости, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ:

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

# div1 {функция-врСмя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: линСйная;}
# div2 {функция-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ;}
# div3 {функция-синхронизации-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: easy-in;}
# div4 {функция-Ρ‚Π°ΠΉΠΌΠΈΠ½Π³Π°-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: easy-out;}
# div5 {анимация-Ρ‚Π°ΠΉΠΌΠΈΠ½Π³ΠΈ-функция: Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ Π²Ρ…ΠΎΠ΄Π°;}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ Ρ€Π΅ΠΆΠΈΠΌ Π·Π°Π»ΠΈΠ²ΠΊΠΈ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

CSS-анимация Π½Π΅ влияСт Π½Π° элСмСнт Π΄ΠΎ воспроизвСдСния ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° ΠΈΠ»ΠΈ послС воспроизвСдСния послСднСго ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°.Бвойство animation-fill-mode ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ это ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.

Бвойство animation-fill-mode опрСдСляСт ΡΡ‚ΠΈΠ»ΡŒ для Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ элСмСнта, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится (Π΄ΠΎ этого начинаСтся, послС окончания ΠΈΠ»ΠΈ ΠΈ Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅).

Бвойство animation-fill-mode ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • Π½Π΅Ρ‚ β€” Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Анимации Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ стили ΠΊ элСмСнту Π΄ΠΎ ΠΈΠ»ΠΈ послС выполнСния
  • Π²ΠΏΠ΅Ρ€Π΅Π΄ β€” элСмСнт сохранит значСния стиля, Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ послСдним ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ (зависит ΠΎΡ‚ направлСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ)
  • Π½Π°Π·Π°Π΄ β€” элСмСнт ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ ΡΡ‚ΠΈΠ»ΡŒ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Π΄Π°ΡŽΡ‚ΡΡ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ (зависит ΠΎΡ‚ направлСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ), ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ это Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  • ΠΎΠ±Π° β€” Анимация Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ ΠΊΠ°ΠΊ Π²ΠΏΠ΅Ρ€Π΅Π΄, Ρ‚Π°ΠΊ ΠΈ Π½Π°Π·Π°Π΄, Ρ€Π°ΡΡˆΠΈΡ€ΡΡ свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ±ΠΎΠΈΡ… направлСния

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ элСмСнт

сохраняСт значСния стиля ΠΈΠ· послСдний ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ ΠΏΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

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

div {
width: 100px;
высота: 100 пиксСлСй;
Ρ„ΠΎΠ½: красный;
позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 с;
Ρ€Π΅ΠΆΠΈΠΌ Π·Π°Π»ΠΈΠ²ΠΊΠΈ-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Π²ΠΏΠ΅Ρ€Π΅Π΄;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ элСмСнт

ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ значСния стиля, установлСнныС ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ ΠΏΠ΅Ρ€Π΅Π΄ запуском Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ):

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

div {
width: 100px;
высота: 100 пиксСлСй;
Ρ„ΠΎΠ½: красный;
позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 с;
Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2 с;
Animation-fill-mode: backwards;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ позволяСт элСмСнту

ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ установлСнныС значСния стиля. ΠΏΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΌΡƒ ΠΊΠ°Π΄Ρ€Ρƒ ΠΏΠ΅Ρ€Π΅Π΄ запуском Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ сохранитС значСния стиля ΠΎΡ‚ послСднСго ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° ΠΏΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

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

div {
width: 100px;
высота: 100 пиксСлСй;
Ρ„ΠΎΠ½: красный;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 сСкунды;
Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2 с;
Animation-fill-mode: both;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Бвойство сокращСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡˆΠ΅ΡΡ‚ΡŒ свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

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

div {
имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 5 с;
функция Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: линСйная;
Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2 с;
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: бСсконСчно;
Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π’ΠΎΡ‚ ΠΆΠ΅ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎ ΠΈ Π²Ρ‹ΡˆΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достигнут с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сокращСния анимация свойство:


ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ сСбя упраТнСниями!


Бвойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ пСрСчислСны ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes ΠΈ всС свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS:



CSS Подсказка


Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.


Π”Π΅ΠΌΠΎ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ подсказок

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для указания Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Ρ‡Π΅ΠΌ-Π»ΠΈΠ±ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт:


Базовая подсказка

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку, которая появляСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт:

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


/ * ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ подсказки * /
.tooltip {
position: relative;
дисплСй: встроСнный Π±Π»ΠΎΠΊ;
ниТняя Π³Ρ€Π°Π½ΠΈΡ†Π°: 1 пиксСль с Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Ρ‡Π΅Ρ€Π½ΠΈΡ‚ΡŒ; / * Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄ парящим тСкстом появлялись Ρ‚ΠΎΡ‡ΠΊΠΈ * /
}

/ * ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки * /
.Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка .tooltiptext {
Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ: скрыто;
ΡˆΠΈΡ€ΠΈΠ½Π°: 120 пиксСлСй;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
Ρ†Π²Π΅Ρ‚: #fff;
Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
отступ: 5px 0;
радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 6 пиксСлСй;

/ * ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки β€” см. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΠΈΠΆΠ΅! * /
позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
z-индСкс: 1;
}

/ * ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки * /
.tooltip: hover .tooltiptext {
Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ: видимая;
}

НавСдСниС надо мной
Подсказка тСкст

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

ОбъяснСниС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°

HTML: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ элСмСнт ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€,

) ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ "Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка" класс ΠΊ Π½Π΅ΠΌΡƒ.Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° этот
, отобраТаСтся тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки помСщаСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ встроСнного элСмСнта (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ) с class = "tooltiptext" .

CSS: Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка класс ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ : ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ для позиционирования тСкста Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки (позиция : Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ ). ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π‘ΠΌ. НиТС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ размСщСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Класс tooltiptext содСрТит фактичСский тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.это ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ скрыт ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора (см. Π½ΠΈΠΆΠ΅). ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ основныС стили ΠΊ Π½Π΅ΠΌΡƒ: ΡˆΠΈΡ€ΠΈΠ½Π° 120 пиксСлСй, Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ тСкста, тСкст ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈ отступ 5 пиксСлСй свСрху ΠΈ снизу.

Бвойство CSS border-radius ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для добавлСния Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС. тСкст.

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ : hover ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для отобраТСния тСкста Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π°

с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ class = "tooltip" .



Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для позиционирования

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка размСщаСтся справа ( слСва: 105% ) ΠΎΡ‚ Β«hoverableΒ» тСкст (

). Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ top: -5px ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для размСщСния Π΅Π³ΠΎ Π² сСрСдинС элСмСнта ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ число 5 , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ ΠΈ ниТняя ΠΎΠ±ΠΈΠ²ΠΊΠ° 5 пиксСлСй. Если Π²Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΡŒΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства top Π΄ΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ остаСтся посСрСдинС (Ссли Π²Ρ‹ этого Ρ…ΠΎΡ‚ΠΈΡ‚Π΅).Π’Π°ΠΊΠΎΠΉ ΠΆΠ΅ примСняСтся, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Π»Π°ΡΡŒ слСва.

ΠŸΡ€Π°Π²Π°Ρ подсказка

.tooltip .tooltiptext {
top: -5px;
оставили: 105%;
}

Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π°Π΄ΠΎ ΠΌΠ½ΠΎΠΉ ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

ЛСвая подсказка

.tooltip .tooltiptext {
top: -5px;
Π²Π΅Ρ€Π½ΠΎ: 105%;
}

Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π°Π΄ΠΎ ΠΌΠ½ΠΎΠΉ ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»Π°ΡΡŒ свСрху ΠΈΠ»ΠΈ снизу, см. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΠΈΠΆΠ΅.ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ свойство margin-left со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ минус 60. пиксСлСй. Π­Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку Π½Π°Π΄ / ΠΏΠΎΠ΄ парящим тСкстом. УстановлСно Π΄ΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки (120/2 = 60).

ВСрхняя подсказка

.tooltip .tooltiptext {
width: 120px;
Π²Π½ΠΈΠ·Ρƒ: 100%; ΠžΡΡ‚Π°Π»ΠΎΡΡŒ
: 50%;
Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅: -60 пиксСлСй; / * Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ (120/2 = 60), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку * /
}

Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π°Π΄ΠΎ ΠΌΠ½ΠΎΠΉ ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

НиТняя подсказка

.Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка .tooltiptext {
width: 120px;
Π²Π΅Ρ€Ρ…: 100%; ΠžΡΡ‚Π°Π»ΠΎΡΡŒ
: 50%;
Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅: -60 пиксСлСй; / * Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ (120/2 = 60), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку * /
}

Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π°Π΄ΠΎ ΠΌΠ½ΠΎΠΉ ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ стрСлку, которая Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ стороны Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ «пустой» содСрТаниС послС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка с классом псСвдоэлСмСнта :: послС вмСстС с содСрТимым свойство.Π‘Π°ΠΌΠ° стрСлка создаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€Π°Π½ΠΈΡ†. Π­Ρ‚ΠΎ сдСлаСт Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку выглядят ΠΊΠ°ΠΊ Ρ€Π΅Ρ‡Π΅Π²ΠΎΠΉ ΠΏΡƒΠ·Ρ‹Ρ€ΡŒ.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стрСлку Π² ниТнюю Ρ‡Π°ΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки:

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ° снизу

.tooltip .tooltiptext :: after {
content: «»;
позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
Π²Π΅Ρ€Ρ…: 100%; / * Π’Π½ΠΈΠ·Ρƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки * /
слСва: 50%;
лСвоС полС: -5 пиксСлСй;
ΡˆΠΈΡ€ΠΈΠ½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 5 пиксСлСй;
ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: сплошной;
Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ;
}

Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π°Π΄ΠΎ ΠΌΠ½ΠΎΠΉ ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

ОбъяснСниС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°

ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ стрСлку Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки: Π²Π²Π΅Ρ€Ρ…Ρƒ: 100% помСстит стрСлку Π² Π²Π½ΠΈΠ·Ρƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. слСва: 50% Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ стрСлку.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Бвойство border-width опрСдСляСт Ρ€Π°Π·ΠΌΠ΅Ρ€ стрСлка. Если Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ это, Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ margin-left Π½Π° Ρ‚ΠΎ ΠΆΠ΅ самоС. Π­Ρ‚ΠΎΡ‚ стрСлка Π±ΡƒΠ΄Π΅Ρ‚ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅.

Π¦Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для прСобразования содСрТимого Π² стрСлку. ΠœΡ‹ устанавливаСм вСрхняя Π³Ρ€Π°Π½ΠΈΡ†Π° становится Ρ‡Π΅Ρ€Π½ΠΎΠΉ, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ β€” ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΉ. Если Π±Ρ‹ всС стороны Π±Ρ‹Π»ΠΈ Ρ‡Π΅Ρ€Π½Ρ‹ΠΌΠΈ, Ρ‚Ρ‹ Π² ΠΈΡ‚ΠΎΠ³Π΅ получится Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стрСлку Π² Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° этот Ρ€Π°Π· ΠΌΡ‹ установили Ρ†Π²Π΅Ρ‚ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹:

ВСрхняя стрСлка

.tooltip .tooltiptext :: after {
content: «»;
позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
Π½ΠΈΠ·: 100%; / * Π’Π²Π΅Ρ€Ρ…Ρƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки * /
ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ: 50%;
лСвоС полС: -5 пиксСлСй;
ΡˆΠΈΡ€ΠΈΠ½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 5 пиксСлСй;
ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: сплошной;
Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ;
}

Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π°Π΄ΠΎ ΠΌΠ½ΠΎΠΉ ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стрСлку слСва ΠΎΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки:

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ° Π²Π»Π΅Π²ΠΎ

.tooltip .tooltiptext :: after {
content: «»;
позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
Π²Π΅Ρ€Ρ…: 50%;
справа: 100%; / * Π‘Π»Π΅Π²Π° ΠΎΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки * /
margin-top: -5px;
ΡˆΠΈΡ€ΠΈΠ½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 5 пиксСлСй;
ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: сплошной;
Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ;
}

Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π°Π΄ΠΎ ΠΌΠ½ΠΎΠΉ ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стрСлку справа ΠΎΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки:

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ° Π²ΠΏΡ€Π°Π²ΠΎ

.tooltip .tooltiptext :: after {
content: «»;
позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
Π²Π΅Ρ€Ρ…: 50%;
ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ: 100%; / * Π‘ΠΏΡ€Π°Π²Π° ΠΎΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка * /
margin-top: -5px;
ΡˆΠΈΡ€ΠΈΠ½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 5 пиксСлСй;
ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: сплошной;
Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
}

Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π°Π΄ΠΎ ΠΌΠ½ΠΎΠΉ ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

ПоявлСниС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок (анимация)

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки исчСзал, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π²ΠΎΡ‚-Π²ΠΎΡ‚ станСт Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS transition вмСстС с Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ свойство, ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΎΡ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΠΊ 100% Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌΡƒ Π·Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ количСство сСкунд. (1 сСкунда Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅):

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

.Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка .tooltiptext {
Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ: 0;
ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄: Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ 1 с;
}

.tooltip: hover .tooltiptext {
Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ: 1;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

ИспользованиС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS β€” CSS: каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй

CSS-анимация позволяСт Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ стиля CSS ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΉ. Анимация состоит ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²: стиля, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ CSS, ΠΈ Π½Π°Π±ΠΎΡ€Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ состояния стиля Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Π΅ ΠΏΡƒΡ‚Π΅Π²Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ.

Π£ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… прСимущСства ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΌΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, управляСмой сцСнариями:

  1. Π˜Ρ… Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для простой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ; Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΡ…, Π΄Π°ΠΆΠ΅ Π½Π΅ зная JavaScript.
  2. Анимация Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ срСднСй Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ систСмы. ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ часто ΠΏΠ»ΠΎΡ…ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² JavaScript. ΠœΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ пропуск ΠΊΠ°Π΄Ρ€ΠΎΠ² ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΠΎΠΉ.
  3. Π Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ позволяСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ частоту обновлСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, Π·Π°ΠΏΡƒΡ‰Π΅Π½Π½Ρ‹Ρ… Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² настоящСС врСмя Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS, Π²Ρ‹ Π·Π°Π΄Π°Π΅Ρ‚Π΅ ΡΡ‚ΠΈΠ»ΡŒ элСмСнту, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства animation ΠΈΠ»ΠΈ Π΅Π³ΠΎ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… свойств. Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ врСмя, ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π΄Π΅Ρ‚Π°Π»ΠΈ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Π° Ρ€Π°Π·Π²ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ Π½Π΅ , Π° Π½Π΅ , настраиваСт фактичСский внСшний Π²ΠΈΠ΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎ выполняСтся с использованиСм ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes , ΠΊΠ°ΠΊ описано Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с использованиСм ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ²Β» Π½ΠΈΠΆΠ΅.

ΠŸΠΎΠ΄ΡΠ²ΠΎΠΉΡΡ‚Π²Π° свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ :

имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
Π—Π°Π΄Π°Π΅Ρ‚ имя at-ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes , ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
Π—Π°Π΄Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
функция синхронизации Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
НастраиваСт врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ; Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ анимация ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹, устанавливая ΠΊΡ€ΠΈΠ²Ρ‹Π΅ ускорСния.
Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
НастраиваСт Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ элСмСнта ΠΈ Π½Π°Ρ‡Π°Π»ΠΎΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
Π—Π°Π΄Π°Π΅Ρ‚ количСство ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ; Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ infinite , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ бСсконСчно.
Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, Π΄ΠΎΠ»ΠΆΠ½Π° Π»ΠΈ анимация ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΡ€ΠΎΡ…ΠΎΠΆΠ΄Π΅Π½ΠΈΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈΠ»ΠΈ ΡΠ±Ρ€Π°ΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π΄ΠΎ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ.
Ρ€Π΅ΠΆΠΈΠΌ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
Π—Π°Π΄Π°Π΅Ρ‚ значСния, примСняСмыС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Π΄ΠΎ ΠΈ послС Π΅Π΅ выполнСния.
состояниС воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΏΡ€ΠΈΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ Π²ΠΎΠ·ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ настроили врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ достигаСтся установкой Π΄Π²ΡƒΡ… ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² с использованиСм ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes . ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ описываСт, ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ синхронизация Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ опрСдСляСтся Π² стилС CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ <ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚> , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ врСмя Π²ΠΎ врСмя ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ΠΈ происходят.0% ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π° 100% ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ состояниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ эти Π΄Π²Π° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Ρ‚Π°ΠΊ Π²Π°ΠΆΠ½Ρ‹, Ρƒ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ псСвдонимы: ΠΎΡ‚ ΠΈ Π΄ΠΎ . Оба Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹. Если ΠΎΡ‚ / 0% ΠΈΠ»ΠΈ Π΄ΠΎ / 100% Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ запускаСт ΠΈΠ»ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ вычислСнныС значСния всСх Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ².

ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Π΅ шаги ΠΌΠ΅ΠΆΠ΄Ρƒ Π½Π°Ρ‡Π°Π»ΠΎΠΌ ΠΈ ΠΊΠΎΠ½Ρ†ΠΎΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: НСкоторым старым Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌ (Π΄ΠΎ 2017 Π³ΠΎΠ΄Π°) ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ прСфиксы; ΠΆΠΈΠ²Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² своСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ синтаксис с прСфиксом -webkit .

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ скольТСния тСкста ΠΏΠΎ ΠΎΠΊΠ½Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

Π­Ρ‚ΠΎΡ‚ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ стилизуСт элСмСнт

Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст скользил Π²Π½ΡƒΡ‚Ρ€ΡŒ с ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ страница ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ ΡˆΠΈΡ€Π΅, Ρ‡Π΅ΠΌ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, помСститС элСмСнт для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈ установитС overflow : hidden Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€.

  ΠΏ {
  ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 сСкунды;
  имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: слайдин;
}

@keyframes slidein {
  ΠΈΠ· {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 100%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 300%;
  }

  ΠΊ {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 0%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
  }
}
  

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта

ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ анимация Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ 3 сСкунды ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°, с использованиСм свойства animation-duration ΠΈ Ρ‡Ρ‚ΠΎ имя @keyframes at- ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, называСтся Β«slideinΒ».

Если Π±Ρ‹ ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта

отобраТался Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ CSS, ΠΌΡ‹ Π±Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ Π΅Π³ΠΎ сюда; ΠΎΠ΄Π½Π°ΠΊΠΎ Π² этом случаС Π½Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ стили, ΠΊΡ€ΠΎΠΌΠ΅ эффСкта Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ с использованиСм ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes . Π’ этом случаС Ρƒ нас всСго Π΄Π²Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π°. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ происходит ΠΏΡ€ΠΈ 0% (с использованиСм псСвдонима ΠΈΠ· ). Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ настраиваСм Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ элСмСнта Π½Π° 100% (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π° дальнСм ΠΏΡ€Π°Π²ΠΎΠΌ ΠΊΡ€Π°ΡŽ содСрТащСго элСмСнта), Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ элСмСнта Π½Π° 300% (ΠΈΠ»ΠΈ Π² Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π° большС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго элСмСнта ).Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ выводится Π·Π° ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π’Ρ‚ΠΎΡ€ΠΎΠΉ (ΠΈ послСдний) ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ находится Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ 100% (с использованиСм псСвдонима ΠΎΡ‚ Π΄ΠΎ ). Π›Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ установлСно Π½Π° 0%, Π° ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта установлСна ​​на 100%. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Π΅Ρ‚ свою Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΏΠ»ΠΎΡ‚Π½ΡƒΡŽ ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ области содСрТимого.

  

ГусСница ΠΈ Алиса Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя ΠΌΠΎΠ»Ρ‡Π° смотрСли Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°: Π½Π°ΠΊΠΎΠ½Π΅Ρ† ГусСница Π²Ρ‹Π½ΡƒΠ»Π° кальян ΠΈΠ·ΠΎ Ρ€Ρ‚Π° ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠ»Π°ΡΡŒ ΠΊ Π΅Π΅ вялым, сонным голосом.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ : ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ CodePen, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π² срСдС CodePen.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π°

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ ΠΊ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°. Допустим, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° увСличивался Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ справа Π½Π°Π»Π΅Π²ΠΎ, Π° Π·Π°Ρ‚Π΅ΠΌ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π»ΡΡ Π΄ΠΎ исходного Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ просто, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ этот ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€:

  75% {
  Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 300%;
  ΠΌΠ°Ρ€ΠΆΠ° слСва: 25%;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 150%;
}
  

ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ выглядит Ρ‚Π°ΠΊ:

  ΠΏ {
  ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 сСкунды;
  имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: слайдин;
}

@keyframes slidein {
  ΠΈΠ· {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 100%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 300%;
  }

  75% {
    Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 300%;
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 25%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 150%;
  }

  ΠΊ {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 0%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
  }
}
  
  

ГусСница ΠΈ Алиса Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя ΠΌΠΎΠ»Ρ‡Π° смотрСли Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°: Π½Π°ΠΊΠΎΠ½Π΅Ρ† ГусСница Π²Ρ‹Π½ΡƒΠ»Π° кальян ΠΈΠ·ΠΎ Ρ€Ρ‚Π° ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠ»Π°ΡΡŒ ΠΊ Π΅Π΅ вялым, сонным голосом.

Π­Ρ‚ΠΎ сообщаСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ 75% ΠΏΡƒΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ 25%, Π° ΡˆΠΈΡ€ΠΈΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ 150%.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ : ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ CodePen, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π² срСдС CodePen.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ повторСния

Π§Ρ‚ΠΎΠ±Ρ‹ анимация ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ»Π°ΡΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство animation-iteration-count , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, сколько Ρ€Π°Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ.Π’ этом случаС Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ infinite , Ρ‡Ρ‚ΠΎΠ±Ρ‹ анимация ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΠ»Π°ΡΡŒ бСсконСчно:

  ΠΏ {
  ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 сСкунды;
  имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: слайдин;
  количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: бСсконСчно;
}
  

ДобавляСм ΠΊ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΠΊΠΎΠ΄Ρƒ:

  @keyframes slidein {
  ΠΈΠ· {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 100%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 300%;
  }

  ΠΊ {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 0%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
  }
}
  
  

ГусСница ΠΈ Алиса Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя ΠΌΠΎΠ»Ρ‡Π° смотрСли Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°: Π½Π°ΠΊΠΎΠ½Π΅Ρ† ГусСница Π²Ρ‹Π½ΡƒΠ»Π° кальян ΠΈΠ·ΠΎ Ρ€Ρ‚Π° ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠ»Π°ΡΡŒ ΠΊ Π΅Π΅ вялым, сонным голосом.

ЗаставляСт Π΅Π³ΠΎ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π²ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ Π½Π°Π·Π°Π΄

Π­Ρ‚ΠΎ заставляСт Π΅Π³ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ странно, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ возвращаСтся ΠΊ Π½Π°Ρ‡Π°Π»Ρƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. На самом Π΄Π΅Π»Π΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ двигался Π²ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ Π½Π°Π·Π°Π΄ ΠΏΠΎ экрану. Π­Ρ‚ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, установив animation-direction Π½Π° alternate :

.
  ΠΏ {
  ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 сСкунды;
  имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: слайдин;
  количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: бСсконСчно;
  Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅;
}
  

А ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ΄:

  @keyframes slidein {
  ΠΈΠ· {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 100%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 300%;
  }

  ΠΊ {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 0%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
  }
}
  
  

ГусСница ΠΈ Алиса Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя ΠΌΠΎΠ»Ρ‡Π° смотрСли Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°: Π½Π°ΠΊΠΎΠ½Π΅Ρ† ГусСница Π²Ρ‹Π½ΡƒΠ»Π° кальян ΠΈΠ·ΠΎ Ρ€Ρ‚Π° ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠ»Π°ΡΡŒ ΠΊ Π΅Π΅ вялым, сонным голосом.

ИспользованиС сокращСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для экономии мСста. НапримСр, ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ использовали Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅:

  ΠΏ {
  ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 сСкунды;
  имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: слайдин;
  количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: бСсконСчно;
  Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅;
}
  

МоТно Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π°

  ΠΏ {
  анимация: 3 сСкунды бСсконСчноС Ρ‡Π΅Ρ€Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ слайдов;
}
  

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ : Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π° справочной страницС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ :

Установка Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойств Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

ΠŸΠΎΠ»Π½Ρ‹Π΅ значСния CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… запятыми β€” эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ нСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π΅ ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ ΠΈ Ρ‚. Π”.для Ρ€Π°Π·Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ. Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим нСсколько быстрых ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ пСрСстановки:

Π’ этом ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ нас установлСно Ρ‚Ρ€ΠΈ ΠΈΠΌΠ΅Π½ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ. Π’ этом случаС всСм Ρ‚Ρ€Π΅ΠΌ анимациям даСтся одинаковая ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ:

  имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: fadeInOut, moveLeft300px, bounce;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 сСкунды;
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 1;  

Π’ этом Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ значСния, установлСнныС для всСх Ρ‚Ρ€Π΅Ρ… свойств.Π’ этом случаС каТдая анимация запускаСтся с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ свойствС, Ρ‚Π°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, fadeInOut ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ 2,5 с ΠΈ количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ 2 ΠΈ Ρ‚. Π”.

  имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: fadeInOut, moveLeft300px, bounce;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2,5 с, 5 с, 1 с;
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2, 1, 5;  

Π’ этом Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌ случаС Π·Π°Π΄Π°Π½Ρ‹ Ρ‚Ρ€ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²Π΅ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ. Π’ Ρ‚Π°ΠΊΠΈΡ… случаях, ΠΊΠΎΠ³Π΄Π° нСдостаточно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ для присвоСния ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, значСния цикличСски ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°.Π’Π°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, fadeInOut ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ 2,5 сСкунды, Π° moveLeft300px β€” 5 сСкунд. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ подошли ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ доступных Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, поэтому ΠΌΡ‹ снова Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΠΌ с самого Π½Π°Ρ‡Π°Π»Π° β€” поэтому Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ отскока составляСт 2,5 сСкунды. Π‘Ρ‡Π΅Ρ‚Ρ‡ΠΈΠΊΠΈ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ (ΠΈ Π»ΡŽΠ±Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ значСния свойств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΡƒΠΊΠ°ΠΆΠ΅Ρ‚Π΅) Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

  имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: fadeInOut, moveLeft300px, bounce;
ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2,5 с, 5 с;
количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 2, 1;  

ИспользованиС событий Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π½Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ события Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.Π­Ρ‚ΠΈ события, прСдставлСнныС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ AnimationEvent , ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для обнаруТСния Π½Π°Ρ‡Π°Π»Π°, окончания ΠΈ Π½Π°Ρ‡Π°Π»Π° Π½ΠΎΠ²ΠΎΠΉ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. КаТдоС событиС Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ врСмя, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ½ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π²Ρ‹Π·Π²Π°Π²ΡˆΠ΅ΠΉ событиС.

ΠœΡ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΡΠΊΠΎΠ»ΡŒΠ·ΡΡ‰Π΅Π³ΠΎ тСкста, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ событии Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ происходит, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ CSS

НачнСм с создания CSS для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.Π­Ρ‚Π° анимация Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π»ΠΈΡ‚ΡŒΡΡ 3 сСкунды, Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ «скольТСниС», ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ 3 Ρ€Π°Π·Π° ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅. Π’ @keyframes ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ Π»Π΅Π²Ρ‹ΠΌ ΠΏΠΎΠ»Π΅ΠΌ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΡƒΡŽΡ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнт скользил ΠΏΠΎ экрану.

  .slidein {
  ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3 сСкунды;
  имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: слайдин;
  количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 3;
  Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅;
}

@keyframes slidein {
  ΠΈΠ· {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 100%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 300%
  }

  ΠΊ {
    ΠΌΠ°Ρ€ΠΆΠ° слСва: 0%;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
  }
}  
Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ»ΡƒΡˆΠ°Ρ‚Π΅Π»Π΅ΠΉ событий Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ JavaScript для ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Π½ΠΈΡ всСх Ρ‚Ρ€Π΅Ρ… Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… событий Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ настраиваСт наши ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Ρ‚Π΅Π»ΠΈ событий; ΠΌΡ‹ Π²Ρ‹Π·Ρ‹Π²Π°Π΅ΠΌ Π΅Π³ΠΎ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° для настройки.

  var element = document.getElementById ("watchme");
element.addEventListener ("запуск Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ", ΡΠ»ΡƒΡˆΠ°Ρ‚Π΅Π»ΡŒ, лоТь);
element.addEventListener ("animationend", ΡΠ»ΡƒΡˆΠ°Ρ‚Π΅Π»ΡŒ, лоТь);
element.addEventListener ("анимация", ΡΠ»ΡƒΡˆΠ°Ρ‚Π΅Π»ΡŒ, лоТь);

element.className = "слайд";
  

Π­Ρ‚ΠΎ довольно стандартный ΠΊΠΎΠ΄; Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ для eventTarget.addEventListener () . ПослСднСС, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ этот ΠΊΠΎΠ΄, β€” устанавливаСт класс для элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π½Π° Β«slideinΒ»; ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ это, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ событиС animationstart срабатываСт, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ начинаСтся анимация, Π° Π² нашСм случаС это происходит Π΄ΠΎ запуска нашСго ΠΊΠΎΠ΄Π°. Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ сами Π½Π°Ρ‡Π½Π΅ΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, установив для класса элСмСнта ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½ постфактум.

ΠŸΡ€ΠΈΠ΅ΠΌ событий

Бобытия Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ listener () , которая ΠΏΠΎΠΊΠ°Π·Π°Π½Π° Π½ΠΈΠΆΠ΅.

  ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ (событиС) {
  var l = document.createElement ("Π»ΠΈ");
  switch (event.type) {
    case "animationstart":
      l.textContent = `Начато: ΠΏΡ€ΠΎΡˆΠ΅Π΄ΡˆΠ΅Π΅ врСмя $ {event.elapsedTime}`;
      ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π°;
    case "animationend":
      l.textContent = `Π—Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΎ: ΠΏΡ€ΠΎΡˆΠ΅Π΄ΡˆΠ΅Π΅ врСмя $ {event.elapsedTime}`;
      ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π°;
    case "animationiteration":
      l.textContent = `Новый Ρ†ΠΈΠΊΠ» начался Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ $ {event.elapsedTime}`;
      ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π°;
  }
  document.getElementById (Β«Π²Ρ‹Π²ΠΎΠ΄Β»). appendChild (l);
}
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Ρ‚ΠΎΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ простой.Он смотрит Π½Π° event.type , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠ΅ событиС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ, Π° Π·Π°Ρ‚Π΅ΠΌ добавляСт ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ Π²

    (нСупорядочСнный список), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ для рСгистрации этих событий.

    Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, ΠΊΠΎΠ³Π΄Π° всС сказано ΠΈ сдСлано, выглядит ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

    • Начато: ΠΈΡΡ‚Π΅ΠΊΡˆΠ΅Π΅ врСмя 0
    • Новый Ρ†ΠΈΠΊΠ» начался Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ 3.01200008392334
    • Новый Ρ†ΠΈΠΊΠ» начался Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ 6.00600004196167
    • Π—Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΎ: ΠΈΡΡ‚Π΅ΠΊΡˆΠ΅Π΅ врСмя 9.234000205993652

    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ врСмя ΠΎΡ‡Π΅Π½ΡŒ Π±Π»ΠΈΠ·ΠΊΠΎ, Π½ΠΎ Π½Π΅ совсСм ΠΊ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠΌΡƒ, учитывая врСмя, установлСнноС ΠΏΡ€ΠΈ настройкС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ послС послСднСй ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ событиС animationiteration Π½Π΅ отправляСтся; вмСсто этого отправляСтся событиС animationend .

    HTML

    Для ΠΏΠΎΠ»Π½ΠΎΡ‚Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹ Π²ΠΎΡ‚ HTML-ΠΊΠΎΠ΄, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΉ содСрТимоС страницы, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ список, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ скрипт вставляСт ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Ρ… событиях:

       

    Π‘ΠΌΠΎΡ‚Ρ€ΠΈ, ΠΊΠ°ΠΊ я двигаюсь

    Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ CSS для создания h2 элСмСнты ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΏΠΎ страницС.

    ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΡ‹ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌ тСкст ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° запускаСтся событиС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΡ… Π² дСйствии.

    А Π²ΠΎΡ‚ ΠΈ ΠΆΠΈΠ²ΠΎΠΉ Π²Ρ‹Π²ΠΎΠ΄.

    ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ : ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ страницу, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ CodePen, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π² срСдС CodePen.

    animation β€” CSS: Cascading Style Sheets

    Π­Ρ‚ΠΎ свойство являСтся сокращСниСм для ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… свойств CSS:

    Бвойство animation опрСдСляСтся ΠΊΠ°ΠΊ ΠΎΠ΄Π½Π° ΠΈΠ»ΠΈ нСсколько ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… запятыми.

    КаТдая ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ анимация указываСтся ΠΊΠ°ΠΊ:

    • ноль ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΎ Π²Ρ…ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:
    • Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ имя для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ none , ΠΈΠ»ΠΈ
    • ноль, ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π΄Π²Π° <врСмя> Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ

    ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π²Π°ΠΆΠ΅Π½: ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ ΠΊΠ°ΠΊ <врСмя> , назначаСтся для Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ , Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ назначаСтся для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ-Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ .

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

    ЗначСния

    <количСство ΠΎΠ΄ΠΈΠ½Π°Ρ€Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ>
    ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ воспроизвСдСний Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· доступных Π² animation-iteration-count .
    <Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ>
    НаправлСниС, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ воспроизводится анимация. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· доступных Π² animation-direction .
    <Ρ€Π΅ΠΆΠΈΠΌ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ>
    ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, ΠΊΠ°ΠΊ стили Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ Ρ†Π΅Π»ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π΄ΠΎ ΠΈ послС Π΅Π΅ выполнСния.Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· доступных Π² animation-fill-mode .
    <состояниС ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ>
    ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, воспроизводится анимация ΠΈΠ»ΠΈ Π½Π΅Ρ‚. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· доступных Π² состоянии воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ .

    МиганиС ΠΈ ΠΌΠΈΠ³Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½Ρ‹ΠΌΠΈ для людСй с ΠΊΠΎΠ³Π½ΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ синдром Π΄Π΅Ρ„ΠΈΡ†ΠΈΡ‚Π° внимания ΠΈ гипСрактивности (Π‘Π”Π’Π“). ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π²ΠΈΠ΄Ρ‹ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ΠΎΠΌ вСстибулярных расстройств, эпилСпсии, ΠΌΠΈΠ³Ρ€Π΅Π½ΠΈ ΠΈ скотопичСской Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

    ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ прСдоставлСнии ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ° для приостановки ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ± использовании запроса с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° для создания Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠΉ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΠΊΠ°Π·Π°Π»ΠΈΡΡŒ ΠΎΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

    Π“Π»Π°Π· Π‘Π°ΠΉΠ»ΠΎΠ½Π°

      
    ΠŸΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΉ
      .polling_message {
      Ρ†Π²Π΅Ρ‚ Π±Π΅Π»Ρ‹ΠΉ;
      ΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π»Π΅Π²ΠΎ;
      ΠΌΠ°Ρ€ΠΆΠ°-ΠΏΡ€Π°Π²ΠΎ: 2%;
    }
    
    .view_port {
      Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
      высота: 25 пиксСлСй;
      ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
      ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: скрыто;
    }
    
    .cylon_eye {
      Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
      background-image: linear-gradient (Π²ΠΏΡ€Π°Π²ΠΎ,
          rgba (0, 0, 0, .9) 25%,
          rgba (0, 0, 0, .1) 50%,
          rgba (0, 0, 0, 0,9) 75%);
      Ρ†Π²Π΅Ρ‚ Π±Π΅Π»Ρ‹ΠΉ;
      высота: 100%;
      ΡˆΠΈΡ€ΠΈΠ½Π°: 20%;
    
      -webkit-animation: 4 с, Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ 0, бСсконСчный Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ move_eye;
              анимация: 4 с Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ 0 с бСсконСчныС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ move_eye;
    }
    
    @ -webkit-keyframes move_eye {from {margin-left: -20%; } Π½Π° {ΠΌΠ°Ρ€ΠΆΠ°-слСва: 100%; }}
            @keyframes move_eye {from {margin-left: -20%; } Π½Π° {ΠΌΠ°Ρ€ΠΆΠ°-слСва: 100%; }}
      

    Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ см. Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ ИспользованиС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS.

    Π’Π°Π±Π»ΠΈΡ†Ρ‹ BCD Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

    ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΡ Quantum CSS

    • Π’ Gecko Π΅ΡΡ‚ΡŒ ошибка, ΠΈΠ·-Π·Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π·Π°ΠΊΠ°Π΄Ρ€ΠΎΠ²Ρ‹ΠΉ элСмСнт Π½Π° экранС, Π½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ, Gecko Π½Π΅ пСрСрисовываСтся Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Windows (ошибка 1383239). Π­Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ исправлСно Π² Π½ΠΎΠ²ΠΎΠΌ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎΠΌ Π΄Π²ΠΈΠΆΠΊΠ΅ CSS Firefox (Ρ‚Π°ΠΊΠΆΠ΅ извСстном ΠΊΠ°ΠΊ Quantum CSS ΠΈΠ»ΠΈ Stylo, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ планируСтся Π²Ρ‹ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π² Firefox 57).
    • Другая ошибка Gecko ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ элСмСнты
      Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° open , Ссли для Π½ΠΈΡ… Π°ΠΊΡ‚ΠΈΠ²Π½Π° анимация (ошибка 1382124).Quantum CSS исправляСт это.
    • Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° ошибка ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с использованиСм em-Π΅Π΄ΠΈΠ½ΠΈΡ† Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ элСмСнтС Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ (ошибка 1254424). Quantum CSS исправляСт это.

    анимация | CSS-ΡƒΠ»ΠΎΠ²ΠΊΠΈ

    Бвойство animation Π² CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… свойств CSS, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ color , background-color , height ΠΈΠ»ΠΈ width .ΠšΠ°ΠΆΠ΄ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ at-ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π·Π°Ρ‚Π΅ΠΌ вызываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства animation , Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

      .element {
      анимация: ΠΏΡƒΠ»ΡŒΡ 5с бСсконСчный;
    }
    
    @keyframes pulse {
      0% {
        Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 001F3F;
      }
      100% {
        Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # FF4136;
      }
    }  

    КаТдоС @keyframes at-ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ опрСдСляСт, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹ Π²ΠΎ врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. НапримСр, 0% β€” это Π½Π°Ρ‡Π°Π»ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π° 100% β€” ΠΊΠΎΠ½Π΅Ρ†.Π­Ρ‚ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π·Π°Ρ‚Π΅ΠΌ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒΡΡ Π»ΠΈΠ±ΠΎ сокращСнным свойством animation , Π»ΠΈΠ±ΠΎ Π΅Π³ΠΎ восСмью ΠΏΠΎΠ΄-свойствами, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π°Ρ‚ΡŒ большС контроля Π½Π°Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ эти ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒΡΡ.

    Π‘ΡƒΠ±ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹

    • имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ : ΠΎΠ±ΡŠΡΠ²Π»ΡΠ΅Ρ‚ имя @keyframes at-ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ.
    • ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ : врСмя, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
    • Ѐункция синхронизации Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ : устанавливаСт прСдустановлСнныС ΠΊΡ€ΠΈΠ²Ρ‹Π΅ ускорСния, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ ΠΈΠ»ΠΈ линСйная .
    • animation-delay : врСмя ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ элСмСнта ΠΈ Π½Π°Ρ‡Π°Π»ΠΎΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ (классныС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹).
    • animation-direction : устанавливаСт Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ послС Ρ†ΠΈΠΊΠ»Π°. Π•Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ сбрасываСтся Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Ρ†ΠΈΠΊΠ»Π΅.
    • счСтчик-ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ : количСство Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π° анимация.
    • animation-fill-mode : устанавливаСт, ΠΊΠ°ΠΊΠΈΠ΅ значСния ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π΄ΠΎ / послС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
      НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ послСднСС состояниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΎΡΡ‚Π°Π²Π°Π»ΠΎΡΡŒ Π½Π° экранС, ΠΈΠ»ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π»ΠΎΡΡŒ ΠΊ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌΡƒ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° анимация Π½Π°Ρ‡Π°Π»Π°ΡΡŒ.
    • состояниС воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ : ΠΏΡ€ΠΈΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ / воспроизвСсти Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ.

    Π­Ρ‚ΠΈ подсвойства ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

      @keyframes stretch {
      / * здСсь объявляСм дСйствия Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ * /
    }
    
    .element {
      имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ;
      ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 1,5 с;
      анимация-функция-Ρ‚Π°ΠΉΠΌΠΈΠ½Π³: Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΠ΅;
      Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: 0 с;
      Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅;
      количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: бСсконСчно;
      Ρ€Π΅ΠΆΠΈΠΌ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Π½Π΅Ρ‚;
      состояниС воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚;
    }
    
    / *
      Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ ΠΊΠ°ΠΊ:
    * /
    
    .element {
      анимация:
        протяТСниС
        1,5 с
        ΠΎΠ±Π»Π΅Π³Ρ‡Π΅Π½ΠΈΠ΅
        0 с
        Ρ‡Π΅Ρ€Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ
        бСсконСчный
        Π½ΠΈΠΊΡ‚ΠΎ
        Π‘Π΅Π³;
    }  

    Π’ΠΎΡ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· этих подсвойств:

    функция синхронизации Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ, Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ Π²Ρ‹Ρ…ΠΎΠ΄Π°, Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ Π²Ρ…ΠΎΠ΄Π°, Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ Π²Ρ…ΠΎΠ΄Π°, линСйная, кубичСская кривая Π‘Π΅Π·ΡŒΠ΅ (x1, y1, x2, y2) (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, кубичСская кривая Π‘Π΅Π·ΡŒΠ΅ (0,5 , 0,2, 0,3, 1,0))
    ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Xs ΠΈΠ»ΠΈ Xms
    Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Xs ΠΈΠ»ΠΈ Xms
    количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ X
    animation-fill-mode Π²ΠΏΠ΅Ρ€Π΅Π΄, Π½Π°Π·Π°Π΄, ΠΎΠ±Π°, Π½Π΅Ρ‚
    animation-direction normal, Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ
    animation-play-state paused, running , Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚

    НСсколько шагов

    Если анимация ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹Π΅ свойства, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΡΡ‚ΡŒ запятыми значСния 0% ΠΈ 100% Π²Π½ΡƒΡ‚Ρ€ΠΈ @keyframes :

      @keyframes pulse {
      0%, 100% {
        Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ;
      }
      50% {
        Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: красный;
      }
    }  

    НСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ

    Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ значСния запятыми, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡŠΡΠ²ΠΈΡ‚ΡŒ нСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ Π² сСлСкторС.Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΡ€ΡƒΠ³Π° Π² @keyframe , ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ пСрСмСщая Π΅Π³ΠΎ ΠΈΠ· стороны Π² сторону с Π΄Ρ€ΡƒΠ³ΠΈΠΌ.

      .element {
      анимация:
        ΠΈΠΌΠΏΡƒΠ»ΡŒΡ 3 с ослаблСниС бСсконСчноС Ρ‡Π΅Ρ€Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅,
        nudge 5s Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ бСсконСчный Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ;
    }  

    ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ

    Анимация Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° свойств β€” это ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, поэтому ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΡΠ²Π»ΡΡ‚ΡŒ ΠΎΡΡ‚ΠΎΡ€ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ свойство. Однако Π΅ΡΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ бСзопасно Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ:

    • transform: translate ()
    • transform: scale ()
    • transform: rotate ()
    • opacity

    КакиС свойства ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ?

    MDN ΠΈΠΌΠ΅Π΅Ρ‚ список свойств CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.АнимируСмыС свойства ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΡŽ ΠΊ Ρ†Π²Π΅Ρ‚Ρƒ ΠΈ числам. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Π½Π΅Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ свойства являСтся background-image .

    ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

    ΠΠ°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ
    Chrome Firefox IE Edge Safari
    4 * 5 * 10 12 5.1 *
    ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ / ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ
    Android Chrome Android Firefox Android iOS Safari
    89 86 4 * 6.0-6,1 *

    Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация

    CSS3 Animate It ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ β€” Анимация элСмСнтов ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅

    Π‘Π΅ΠΊΠ²Π΅Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

    Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π±ΠΎΡ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ запускался ΠΎΠ΄Π½Ρƒ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ врСмя ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π² мс с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Β«data-sequenceΒ», Π° Π·Π°Ρ‚Π΅ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ порядок с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Β«data-idΒ».

    Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚!

    Π­Ρ‚Π° анимация начнСтся Ρ‡Π΅Ρ€Π΅Π· 500 мсСк послС

    Π­Ρ‚Π° анимация начнСтся Ρ‡Π΅Ρ€Π΅Π· 500 мсСк послС

    Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅

    Π­Ρ‚ΠΎ заставит Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ CSS Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ Π΄ΠΎ ΠΈΠ»ΠΈ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½Π° Π²ΠΎΠΉΠ΄Π΅Ρ‚ Π² ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра Π½Π° ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ количСство.ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΠ» Π΅Π΅ Π½Π° 300 пиксСлСй, Ρ‚ΠΎ установка смСщСния -300 пиксСлСй ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ этого.

    
     

    Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚!

ΠΠ½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ этого Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΠΈ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ±Ρ€ΠΎΡˆΠ΅Π½, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΏΠΎΠΊΠΈΠ½Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра.

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚!

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

Π’ настоящСС врСмя Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ 4 скорости, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ трСбуСтся, ΠΊΡ€ΠΎΠΌΠ΅ ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹Ρ…, Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹Ρ… ΠΈ самых ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹Ρ….

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚!

Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° (Π½ΠΎΠ²Ρ‹ΠΉ)

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΊ своим анимациям, Ссли Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ это с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ°ΠΌΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ css Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ всС доступныС Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ.

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚!

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ


 

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚!

По Ρ‰Π΅Π»Ρ‡ΠΊΡƒ с сСквСнированиСм

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с событиСм ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π²Ρ‹Ρ…ΠΎΠ΄Π½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ для Π²Ρ‹Ρ…ΠΎΠ΄Π° с этим.


Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚!

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚!

Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ IE

Π­Ρ‚ΠΎ всСго лишь исправлСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ исправит элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² IE9 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½Π΅ΠΉ вСрсии, поТалуйста, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ анимация Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² IE9 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½Π΅ΠΉ вСрсии.

ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ это ΠΏΠΎΠ΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ.css Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ вашСго Ρ„Π°ΠΉΠ»Π°.


      

 

30 классных ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS для создания ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΡ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… сайтов

CSS ΠΈΠ»ΠΈ CSS3-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ навСдСния, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ², тСкстовыС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Ρ‚. Π”., Π’ настоящСС врСмя ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠΎΠ΄Π½Ρ‹, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π²Π΅Π±-сайт / ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ интСрСсным.

Однако Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-сайта с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ CSS / CSS3 β€” нСпростая Π·Π°Π΄Π°Ρ‡Π° для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

Π˜Ρ‰Π΅Ρ‚Π΅ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ Π² Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΈ Π½ΠΎΠ²Π΅ΠΉΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ 2019 Π³ΠΎΠ΄Π°?

Π’ΠΎΡ‚ 30 самых ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»ΡΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS / CSS3 для создания ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅Π³ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта:

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS-анимация?

CSS-анимация β€” это ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ для Cascading Style Sheets , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, рСдактируя ΠΊΠΎΠ΄ CSS своих Π²Π΅Π±-сайтов, вмСсто нСпосрСдствСнной Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ GIF ΠΈΠ»ΠΈ Flash.

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

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ инструмСнты для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ², ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Π²Π΅Π±-сайты.

Для создания Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Π²Π΅Π±-сайтов Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ инструмСнты для создания ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ большоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Он ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π²Π°ΠΌ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΈ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ вашСго Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта.

25 классных ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS для вашСго вдохновСния

Π”Π°Π²Π°ΠΉΡ‚Π΅ взглянСм Π½Π° 25 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΈ Π½ΠΎΠ²Π΅ΠΉΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS / CSS3 для вашСго вдохновСния:

1. Flying Birds

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

ЛСтящая ΠΏΡ‚ΠΈΡ†Π° Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΎΡ‡Π΅Π½ΡŒ СстСствСнная ΠΈ яркая, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ вСсь Π²Π΅Π±-сайт интСрСсным ΠΈ ярким.

Π­Ρ‚ΠΎ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ связаны с экологичСски чистыми ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ туристичСскиС услуги.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ CSS

2. Анимация ΠΊΡƒΠ±Π° ΠΌΠΎΡ€Ρ„ΠΈΠ½Π³Π°

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ создаСтся вСликолСпная Π²Π΅Π±-анимация для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π°Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΈΠ»ΠΈ интСрСсный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ 3D ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹.

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

3. Анимация Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄Ρ€Π°ΠΊΠΎΠ½Π°

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

Анимация Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ β€” Π²Π°ΠΆΠ½Ρ‹ΠΉ элСмСнт для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ заставляСт ΠΈΡ… ΠΆΠ΄Π°Ρ‚ΡŒ.Π­Ρ‚Π° симпатичная анимация Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄Ρ€Π°ΠΊΠΎΠ½Π° β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ для дСтского сайта.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ CSS

4. ΠŸΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ снСг

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

ΠŸΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ снСг ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Π²Π΅Π±-сайтах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΡŽΡ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ Π·ΠΈΠΌΠ½ΠΈΠ΅ / роТдСствСнскиС / Π½ΠΎΠ²ΠΎΠ³ΠΎΠ΄Π½ΠΈΠ΅ Π°ΠΊΡ†ΠΈΠΈ.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ CSS

5. Анимация ΠΊΡ€ΡƒΠ³Π° ΠΏΠ»Π°ΠΊΠ°Ρ‚Π°

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

Π­Ρ‚Π° Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰Π°ΡΡΡ анимация CSS β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² для отобраТСния Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-содСрТимого.

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

6. CSS3 Image Accordion

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

АккордСон с Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ изобраТСниями Π±Ρ‹Π» ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠΎΠ΄Π½Ρ‹ΠΌ Π² послСдниС Π³ΠΎΠ΄Ρ‹.

Π­Ρ‚ΠΎΡ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS3 ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ для создания Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΡ… Π²Π΅Π±-сайтов ΠΎ ΠΌΠΎΠ΄Π΅, ΠΎΠ΄Π΅ΠΆΠ΄Π΅ ΠΈΠ»ΠΈ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS3

7. CSS3 Анимация навСдСния

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…

ΠžΡ‚Π»ΠΈΡ‡Π½Π°Ρ анимация навСдСния ΠΈΠ»ΠΈ взаимодСйствиС β€” простой способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π΅Π±-сайты Π²Ρ‹Π΄Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ.Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ навСдСния ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΡΠ΅Ρ€ΠΈΡŽ эффСктов навСдСния Π½Π° Π²Ρ‹Π±ΠΎΡ€ Π² зависимости ΠΎΡ‚ ΠΈΡ… собствСнных потрСбностСй.

Π­Ρ‚ΠΎ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ вашСго Π²Π΅Π±-сайта.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ CSS3

8. Анимация Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

Π­Ρ‚Π° анимация Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΎΡ‡Π΅Π½ΡŒ впСчатляСт благодаря ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ ΡΡ‚ΠΈΠ»ΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Если Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ Π²Π΅Π±-сайт с Ρ‚Π΅ΠΌΠΎΠΉ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ, эта анимация Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ CSS станСт для вас ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ CSS

9. Анимация Π³Π»Π°Π· ΠΏΡ€ΠΈ Π²Ρ…ΠΎΠ΄Π΅

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

Π­Ρ‚Π° CSS-анимация ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π° для ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅ΠΉ Π²Π΅Π±-Ρ„ΠΎΡ€ΠΌΡ‹ рСгистрации. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ заполняСт Ρ„ΠΎΡ€ΠΌΡƒ рСгистрации, Π³Π»Π°Π· Π²Π²Π΅Ρ€Ρ…Ρƒ открываСтся ΠΈΠ»ΠΈ закрываСтся соотвСтствСнно, создавая Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-Ρ„ΠΎΡ€ΠΌΡ‹.

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

10. Шаговая 3D-анимация ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

Π­Ρ‚Π° CSS-анимация ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠ½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS

11. Адаптивная анимация Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ содСрТимому CSS3

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ процСсс Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. (ΠŸΡ€ΠΈ нСобходимости Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ 9 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π²Π΅Π±-сайта.)

Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ рСсурс для вас, Ссли Π²Ρ‹ случайно ΠΈΡ‰Π΅Ρ‚Π΅ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π°Π²ΠΈΠ³Π°Ρ‚ΠΎΡ€Π°, сдСланный Π½Π° CSS3.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS3

12. Анимированная ΠΊΠ°Ρ€Ρ‚Π° CSS

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ понятный Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ своих Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π­Ρ‚ΠΎΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Ρ€ΠΎΠ»ΠΈΠΊ с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΊΠ°Ρ€Ρ‚Ρ‹ являСтся Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Π²Ρ‹Π΄Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π²Π΅Π±-ΠΊΠ°Ρ€Ρ‚Ρ‹.

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

13. Анимация мСню с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ тСкстом пСрспСктивы

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Π°Ρ анимация ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ своСго Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², эта анимация тСкстового мСню станСт для вас Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS

14. АккордСонноС мСню Π² стилС Ρ€Π΅Ρ‚Ρ€ΠΎ

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

Π­Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π½ΠΎΠ΅ мСню ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ. Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² / Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ минималистичный Π²Π΅Π±-сайт с Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом.

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ CSS

15. Анимация Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ CSS Ghost

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊ Π² этой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ CSS ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠΈΠ»Ρ‹ΠΉ ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… дСтских сайтов.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ CSS

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS:

16. БлоТная анимация навСдСния CSS

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ CSS3

17. Анимация ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS3

18. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½Π°Ρ анимация

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

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

19.Анимация Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

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

20. Π Π°ΡΡˆΠΈΡ€ΡΡŽΡ‰Π΅Π΅ΡΡ сСточноС мСню

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS 9

21. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Ρ„Π°ΠΉΠ»Π°

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS

22. Анимация Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS

23.Анимация ΠΊΠ½ΠΎΠΏΠΎΠΊ соцсСтСй

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS

24. Анимация навСдСния ΠΈΠ½Ρ„ΠΎΠΊΠ°Ρ€Ρ‚Ρ‹

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠΎΠ΄Π° CSS38

НСобычная анимация ΠΊΠ½ΠΎΠΏΠΎΠΊ

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ CSS

Π­Ρ‚ΠΎ всС свСТиС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS / CSS3, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ собрали для вас. ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ вас Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΡ‚ΡŒ.

5 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Π΅Π±-сайтов с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ CSS

Π’ поисках Π»ΡƒΡ‡ΡˆΠ΅ΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS ΠΌΡ‹ нашли нСсколько ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π²Π΅Π±-сайтов.

ΠœΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ 5 ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Π΅Π±-сайтов с CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ для вашСго вдохновСния:

26. Анимация Π³Π΅Ρ€ΠΎΠ΅Π²

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²Π΅Π±-сайт ΠΎΠ½Π»Π°ΠΉΠ½

27. CSS Proof Drinks

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²Π΅Π±-сайт ΠΎΠ½Π»Π°ΠΉΠ½

28.Gamifiled Web Animation

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Π²Π΅Π±-сайта ΠΎΠ½Π»Π°ΠΉΠ½

29. ΠœΠ°Ρ€ΠΈΠΎΠ½Π΅Ρ‚ΠΎΡ‡Π½Π°Ρ анимация

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…

9 ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Π²Π΅Π±-сайта ΠΎΠ½Π»Π°ΠΉΠ½ 30. 3D Π² сочСтании с 2D-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

Π Π΅ΠΉΡ‚ΠΈΠ½Π³: β˜…β˜…β˜…β˜…β˜…

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Π²Π΅Π±-сайта ΠΎΠ½Π»Π°ΠΉΠ½

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

CSS-анимация Π΄Π΅Π»Π°Π΅Ρ‚ Π²Π΅Π±-сайт Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΡ‡Π΅Ρ€ΠΏΠ½Π΅Ρ‚Π΅ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΈΠ· этих 30 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π²Π΅Π±-сайт.

.

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

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