ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Animate.css
ΠΡΠΈΠ²Π΅Ρ. ΠΠ°ΠΏΠΎΠΌΠ½Ρ, ΡΡΠΎ ΡΠΆΠ΅ ΠΏΠΈΡΠ°Π» ΠΏΡΠΎ ΠΏΠ»Π°Π²Π½ΠΎΡΡΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² CSS3, Π½ΠΎ ΡΡΠΎ Π±ΡΠ»ΠΈ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ. Π‘Π΅ΠΉΡΠ°Ρ ΠΆΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ Π³ΠΎΡΠΎΠ²ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ animate.css. ΠΡΠΎ Π½Π΅ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ, Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΠΏΠΎΠ»Π½Π΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ
ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. Π Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΎΡ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ.
ΠΠ΅ΠΌΠΎ
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Animate.css
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ CSS Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠ΅ΠΊΡΡΠ°, ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΈ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΡΡΠΎ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Javascript, ΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ»ΠΈΠΊ, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΎΡΡ Π²ΡΡΠ΅,Β ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠΎ Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³Π°ΠΌΠΈ head.
<link rel="stylesheet" href="animate.min.css" /> |
<link rel=»stylesheet» href=»animate.min.css» />
ΠΡ ΡΠ°ΠΌΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅ΡΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ΄Π΅Ρ ΡΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ CSS Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ ΠΆΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΠ°ΠΉΡΠ°, ΠΊΠΎΠΌΡ-ΡΠΎ Ρ ΠΎΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°ΡΡΡΠΎΠ΅Π½Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠ°ΠΉΡΠ° ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π±ΡΠ»Π° Π·Π°Π³ΡΡΠΆΠ΅Π½Π°. ΠΠΎ Π»ΠΈΡΠ½ΠΎ ΠΌΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π»Π° ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΈΠ»ΠΈ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. Π Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΠΎ Π²ΠΏΠΎΠ»Π½Π΅ ΡΠ΅Π°Π»ΡΠ½ΠΎ.
<a href="#">Π‘ΡΡΠ»ΠΊΠ°</a> |
<a href=»#»>Π‘ΡΡΠ»ΠΊΠ°</a>
ΠΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ². ΠΠΈΡΠ΅ΠΌ 2 ΠΊΠ»Π°ΡΡΠ°, animated β ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ, Π° tada β ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠΈΠΊΠ» ΠΈ ΡΠ΅ΠΉΡΠ°Ρ ΠΌΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅ΠΌ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΠΎΠ·Π΄Π°Π² Π½ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΊ Π½Π΅ΠΌΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΊ ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΌΡ.
Π¦ΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Animate.css
.tada{animation-iteration-count: infinite;} |
.tada{animation-iteration-count: infinite;}
Π’ΠΎ Π΅ΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠ»Π°ΡΡΠ°, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π²ΠΎΡ ΡΠ°ΠΊ:
<a href="#">Π‘ΡΡΠ»ΠΊΠ°</a> |
<a href=»#»>Π‘ΡΡΠ»ΠΊΠ°</a>
.new{animation-iteration-count: infinite;} |
.new{animation-iteration-count: infinite;}
Π ΡΡΠΎΠ±Ρ Π²Π°ΠΌ Π±ΡΠ»ΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΡΡΠΎ Ρ ΡΡΡ ΠΏΡΡΠ°Π»ΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ, ΡΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΡΠΎ Π²ΠΈΠ΄Π΅ΠΎ, Π³Π΄Π΅ Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡ Π½Π° ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΡΠΊΠ°ΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΌΠΈ ΡΡΠΈΠ»ΠΈ.
Π‘ΠΠΠ§ΠΠ’Π¬
Π£ΡΠ΅Π±Π½ΠΈΠΊ CSS 3. Π‘ΡΠ°ΡΡΡ «ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS. Π§Π°ΡΡΡ 2»
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ ΠΈΠ·ΡΡΠ°ΡΡ Π½ΡΠ°Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΈΠ·ΡΡΠΈΠΌ ΡΠ°ΠΊΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS ΠΊΠ°ΠΊ ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ, ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΠΊΠ°ΠΊ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠΌ ΠΈ Π½Π°ΡΡΠΈΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Animate.css
ΠΠ±ΡΠ°ΡΠ°Ρ ΠΠ°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΠΠ°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π·Π½Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ «ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π² CSS. Π§Π°ΡΡΡ 1».
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ animation-play-state, ΠΎΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΠΎΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π΄Π²ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ²:
- running — Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ).
- paused — Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π°.
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΈ Π·Π°ΠΏΡΡΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ</title> <style> .test { width: 100px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ height: 100px; /* Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ color: white; /* ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° Π±Π΅Π»ΡΠΉ */ background: green; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ position: relative; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ animation-name: iliketomoveit; /* ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-duration: 5s; /* ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-iteration-count: infinite; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ */ animation-play-state: running; /* Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) */ } .test:hover { animation-play-state: paused; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ */ } @keyframes iliketomoveit { 0% {left: 0px;} /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 25% {left: 400px;} /* 25% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 75% {left: 200px;} /* 75% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 100% {left: 0px;} /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } </style> </head> <body> <div class = "test">Π½Π°Π²Π΅Π΄ΠΈ Π½Π° ΠΌΠ΅Π½Ρ</div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 197 ΠΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈ Π·Π°ΠΏΡΡΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.ΠΠ°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation-direction ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π±ΡΠ΄Π΅Ρ Π»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ, ΠΈΠ»ΠΈ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠ΅Π΄ΡΡΡΠΈΡ ΡΡ ΡΠΈΠΊΠ»ΠΎΠ². ΠΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ (Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ).
ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ:
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
normal | ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΠΈΠΊΠ» Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π·Π°Π²Π΅ΡΡΡΠ½, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΡΡΡ Π² Π½Π°ΡΠ°Π»ΠΎ ΠΈ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠΈΠΊΠ» Π·Π°Π½ΠΎΠ²ΠΎ. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
reverse | ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. |
alternate | ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ ΠΊΠ°ΠΊ normal ΠΊΠ°ΠΆΠ΄ΡΠΉ Π½Π΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ°Π· (1, 3, 5…) ΠΈ ΠΊΠ°ΠΊ reverse ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ°Π· (2, 4, 6…). |
alternate-reverse | ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ ΠΊΠ°ΠΊ reverse ΠΊΠ°ΠΆΠ΄ΡΠΉ Π½Π΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ°Π· (1, 3, 5…) ΠΈ ΠΊΠ°ΠΊ normal ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ°Π· (2, 4, 6…). |
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΠ°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ</title> <style> div { width: 75px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ height: 75px; /* Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ border-radius: 60px; /* ΡΠΎΡΠΌΠ° ΡΠ³Π»ΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ display: inline-block; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <div> ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠ΅ (Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ Π² Π»ΠΈΠ½Π΅ΠΉΠΊΡ) */ color: white; /* ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° Π±Π΅Π»ΡΠΉ */ padding: 15px; /* Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎ Π²ΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½ */ position: relative; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ animation-duration: 1.5s; /* Π·Π°Π΄Π°ΡΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 1,5 ΡΠ΅ΠΊΡΠ½Π΄Ρ */ animation-name: iliketomoveit; /* Π·Π°Π΄Π°ΡΠΌ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-iteration-count: infinite; /* Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ */ }.test { animation-direction: normal; /* ΠΏΡΠΈ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΡΡΡ Π² Π½Π°ΡΠ°Π»ΠΎ ΠΈ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠΈΠΊΠ» Π·Π°Π½ΠΎΠ²ΠΎ. */ } .test2 { animation-direction: reverse; /* Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ */ } .test3 { animation-direction: alternate; /* Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ ΠΊΠ°ΠΊ normal ΠΊΠ°ΠΆΠ΄ΡΠΉ Π½Π΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ°Π· (1, 3, 5...) ΠΈ ΠΊΠ°ΠΊ reverse ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ°Π· (2, 4, 6...) */ } .test4 { animation-direction: alternate-reverse; /* Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ ΠΊΠ°ΠΊ reverse ΠΊΠ°ΠΆΠ΄ΡΠΉ Π½Π΅ΡΠ΅ΡΠ½ΡΠΉ ΡΠ°Π· (1, 3, 5...) ΠΈ ΠΊΠ°ΠΊ normal ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ°Π· (2, 4, 6...) */ } @keyframes iliketomoveit { 0% {top: 0px;} /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 25% {top: 180px; background: red;} /* 25% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 75% {top: 90px;} /* 75% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 100% {top: 0px; background: black;} /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } </style> </head> <body> <div class = "test">normal</div> <div class = "test2">reverse</div> <div class = "test3">alternate</div> <div class = "test4">alternate-reverse</div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° top ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΊΠ»Π°ΡΡΠ° ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-direction ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 198 ΠΠ°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² CSS.Π‘ΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation-fill-mode Π·Π°Π΄Π°Π΅Ρ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ (ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π°, ΠΈΠ»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΡ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ animation-delay).
ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
none | Π ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΡΡΠΈΠ»ΠΈ Π΄ΠΎ (Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ), ΠΈΠ»ΠΈ ΠΏΠΎΡΠ»Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. | |||||||||||||||||||||
forwards | ΠΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΈΠ»Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°. ΠΠ°ΠΊΠΈΠΌ Π±ΡΠ΄Π΅Ρ ΡΡΠΎΡ ΠΊΠ°Π΄Ρ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ² animation-direction ΠΈ animation-iteration-count:
| |||||||||||||||||||||
backwards | Π ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΈΠ»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°, Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ ΠΏΠ΅ΡΠΈΠΎΠ΄Π° Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ animation-delay. ΠΠ΅ΡΠ²ΡΠΉ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ animation-direction:
| |||||||||||||||||||||
both | Π ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΎΠ±Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ: forwards ΠΈ backwards (ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½Π° ΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠ΅Π½Π° — Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ). |
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-fill-mode</title> <style>div { width: 100px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ height: 100px; /* Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ color: white; /* ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° */ background: green; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ display: inline-block; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <div> ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠ΅ (Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ Π² Π»ΠΈΠ½Π΅ΠΉΠΊΡ) */ position: relative; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ animation-name: iliketomoveit; /* ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-duration: 5s; /* ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-animation-delay: 2s; /* Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ c Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ 2 ΡΠ΅ΠΊΡΠ½Π΄Ρ */ } .test { animation-fill-mode: none; /* Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΡΡΠΈΠ»ΠΈ Π΄ΠΎ (Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ), ΠΈΠ»ΠΈ ΠΏΠΎΡΠ»Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } .test2 { animation-fill-mode: forwards; /* ΠΏΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΈΠ»Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° (ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠΎΠ½) */ } .test3 { animation-fill-mode: backwards; /* ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΈΠ»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°, Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ ΠΏΠ΅ΡΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ. */ } .test4 { animation-fill-mode: both; /* ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΎΠ±Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ: forwards ΠΈ backwards (ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½Π° ΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠ΅Π½Π° - Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ). */ } @keyframes iliketomoveit { 0% {background: yellow;} /* Π·Π°Π΄Π°Π΅ΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°ΡΠ°Π»Π΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 100% {background: red;} /* Π·Π°Π΄Π°Π΅ΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΏΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } </style> </head> <body> <div class = "test">none</div> <div class = "test2">forwards</div> <div class = "test3">backwards</div> <div class = "test4">both</div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ 5 ΡΠ΅ΠΊΡΠ½Π΄ (animation-duration), Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠΌΠ΅Π΅Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΡ ΡΠ°Π²Π½ΡΡ 2 ΡΠ΅ΠΊΡΠ½Π΄Π°ΠΌ (animation-delay).
Π‘ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΊΠ»Π°ΡΡΠ° ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-fill-mode ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ (ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π°, ΠΈΠ»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΡ):
- ΠΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΡΡΠΈΠ»ΠΈ Π΄ΠΎ (Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ), ΠΈΠ»ΠΈ ΠΏΠΎΡΠ»Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
- ΠΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΠΏΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΈΠ»Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° (ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠΎΠ½).
- Π’ΡΠ΅ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΈΠ»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°, Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ ΠΏΠ΅ΡΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ ΠΏΠ΅ΡΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΆΠ΅Π»ΡΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ (ΠΏΠ΅ΡΠ²ΡΠΉ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ).
- Π§Π΅ΡΠ²Π΅ΡΡΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΎΠ±Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ: forwards ΠΈ backwards (ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½Π° ΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠ΅Π½Π° — Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ). ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ ΠΏΠ΅ΡΠΈΠΎΠ΄Π° Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΆΠ΅Π»ΡΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ (ΠΏΠ΅ΡΠ²ΡΠΉ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ), Π° ΠΏΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ»ΡΡΠΈΡ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠΎΠ½
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 199 ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-fill-mode.Π£Π½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation
ΠΡ Ρ ΠΠ°ΠΌΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π²Π²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π² CSS 3, ΡΡΠΎ Π½Π°ΠΌ Π±ΡΠ»ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°ΡΡ Π²ΡΠ΅ ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΈ, Π²Π΅Π΄Ρ Π½Π°Π±ΠΈΡΠ°ΡΡ ΠΈΡ ΠΏΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π·Π°ΡΡΡΠ΄Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌ, ΠΏΠΎΠ²ΡΠΎΡΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π²Π°ΠΆΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ²ΠΎΠΉΡΡΠ² Π² ΡΠΏΠΈΡΠΊΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠΌΡ ΠΏΠΎΡΡΠ΄ΠΊΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ animation. ΠΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠ°ΠΊ Π² Π½Π°ΡΠ°Π»Π΅ ΡΠΏΠΈΡΠΊΠ°, ΡΠ°ΠΊ ΠΈ Π² Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅.
ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ Π² ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (animation-duration), ΠΈΠ½Π°ΡΠ΅, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³ΡΠ°Π½Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°Π²Π½ΠΎ Π½ΡΠ»Ρ.
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation</title> <style> .test { width: 100px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ° */ height: 100px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° */ position: relative; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ animation: iliketomoveit 4s steps(3,start) 500ms infinite reverse; /* name duration timing-function delay iteration-count direction */ } @keyframes iliketomoveit { 0% {left: 0px;} /* Π·Π°Π΄Π°Π΅ΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°ΡΠ°Π»Π΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 50% {left: 500px; border-radius: 50px; background: plum;} /* Π·Π°Π΄Π°Π΅ΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ, ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΎΡΠΌΡ Π³ΡΠ°Π½ΠΈΡ (ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅) */ 100% {left: 0px; background: green;} /* Π·Π°Π΄Π°Π΅ΠΌ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π·Π°Π΄Π°Π΅ΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΏΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } </style> </head> <body> <div class = "test"></div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΈ ΡΠΎΡΠΌΡ Π³ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ border-radius).
Π‘ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ:
- ΠΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — iliketomoveit.
- ΠΠ»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — 4 ΡΠ΅ΠΊΡΠ½Π΄Ρ.
- ΠΡΠΈΠ²Π°Ρ ΡΠΊΠΎΡΠΎΡΡΠΈ — ΡΠ°Π³ΠΎΠ²Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ steps(3,start). ΠΠ° ΠΊΠ°ΠΆΠ΄ΡΡ ΡΠ°ΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΎ 3 ΡΠ°Π³Π°.
- ΠΠ°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — 500 ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄.
- ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΈΠΊΠ»ΠΎΠ² — infinite (Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ).
- ΠΠ°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — reverse (Π² ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ).
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 200 ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation.Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π° CSS</title> <style> body { margin: 0; /* Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ */ padding: 0; /* Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ */ } .container { width: 100px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ padding-top: 100px; /* Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΡΠ²Π΅ΡΡ Ρ */ margin: 0 auto; /* ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΠΎΡΡΡΡΡΠΏΠ°ΠΌΠΈ */ } div > div { display: inline-block; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <div> ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠ΅ (Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ Π² Π»ΠΈΠ½Π΅ΠΉΠΊΡ) */ width: 10px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ height: 10px; /* Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ margin: 0 auto; /* ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΠΎΡΡΡΡΡΠΏΠ°ΠΌΠΈ */ border-radius: 50px; /* ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΎΡΠΌΡ ΡΠ³Π»ΠΎΠ² */ } .item:nth-child(1) { background: orange; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ animation: up 1s linear 1s infinite; /* name duration timing-function delay iteration-count */ } .item:nth-child(2) { background: violet; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ animation: up 1s linear 1.2s infinite; /* name duration timing-function delay iteration-count */ } .item:nth-child(3) { background: magenta; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ animation: up 1s linear 1.4s infinite; /* name duration timing-function delay iteration-count */ } .item:nth-child(4) { background: lightseagreen; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ animation: up 1s linear 1.6s infinite; /* name duration timing-function delay iteration-count */ } .item:nth-child(5) { background: forestgreen; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ animation: up 1s linear 1.8s infinite; /* name duration timing-function delay iteration-count */ } @keyframes up { 0%, 100% { /* Π½Π°ΡΠ°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ transform: translateY(-15px); /* ΡΠ΄Π²ΠΈΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΠΎΡΠΈ Y */ } 50% { /* ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ transform: translate(5px, 0); /* ΡΠ΄Π²ΠΈΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° 5px ΠΏΠΎ ΠΎΡΠΈ X, ΠΏΠΎ ΠΎΡΠΈ Y ΡΠ΄Π²ΠΈΠ³ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ */ } } </style> </head> <body> <div class = "container"></div> <div class = "item"></div> <div class = "item"></div> <div class = "item"></div> <div class = "item"></div> <div class = "item"></div> </div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, Π² ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° transform ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠ΄Π²ΠΈΠ³ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <div> ΠΏΠΎ ΠΎΡΠΈ X (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΎΡΡ) ΠΈ ΠΏΠΎ ΠΎΡΠΈ Y (Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΎΡΡ). ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <div> Π±ΡΠ»Π° ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½Π°Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠ°Ρ ΠΎΡ 1 ΡΠ΅ΠΊΡΠ½Π΄Ρ Π΄ΠΎ 1,8 ΡΠ΅ΠΊΡΠ½Π΄Ρ. ΠΠ°ΠΆΠ΄Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ:
- ΠΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — up.
- ΠΠ»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — 1 ΡΠ΅ΠΊΡΠ½Π΄Π°.
- ΠΡΠΈΠ²Π°Ρ ΡΠΊΠΎΡΠΎΡΡΠΈ — linear (ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π°Ρ ΡΠΊΠΎΡΠΎΡΡΡ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ Π²ΡΠ΅ΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ).
- ΠΠ°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — ΠΎΡ 1 ΡΠ΅ΠΊΡΠ½Π΄Ρ Π΄ΠΎ 1,8 ΡΠ΅ΠΊΡΠ½Π΄Ρ.
- ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΈΠΊΠ»ΠΎΠ² — infinite (Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ).
ΠΡΠ±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <div> ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° :nth-child(n) Π² Π·Π°ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ (ΠΏΠΎΡΡΠ΄ΠΊΠΎΠ²ΠΎΠ³ΠΎ Π½ΠΎΠΌΠ΅ΡΠ°).
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 201 ΠΡΠΈΠΌΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.Π ΡΡΠΈΡ ΡΡΠ°ΡΡΡΡ ΠΌΡ Π½Π΅ ΡΡΠ°Π»ΠΈ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, Π·Π°ΡΠ°ΡΡΡΡ ΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ, ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π²ΡΠΉΠ΄ΡΡ ΠΈΠ· ΡΠΎΡΠΌΠ°ΡΠ° ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ CSS. Π Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Ρ ΠΎΡΡ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡ ΠΠ°Ρ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ Animate.css, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π° ΠΏΡΠΎΡΡΠΆΠ΅Π½ΠΈΠΈ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΏΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΡΠΎΠΉ, ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Animate.css
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Animate.css ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ· ΡΠ΅Π±Ρ ΠΏΠΎ Π±ΠΎΠ»ΡΡΠΎΠΌΡ ΡΡΠ΅ΡΡ ΡΠ°ΠΉΠ» css ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π°Π±ΠΎΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² Π΄Π»Ρ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² (Π½Π°Π±ΠΎΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²) ΠΈ Π½Π°Π±ΠΎΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ ΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π°Π±ΠΎΡ ΡΠ°ΠΊΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ, ΡΡΡΠ΅ΠΊΡΡ ΠΏΠΎΠ²ΠΎΡΠΎΡΠ°, ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΡ, ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ, ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΠ΅.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΡΠ°ΠΌ ΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Π° ΠΊ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ (ΡΡΠΈΠ»ΠΈ Π±Π΅Π· ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² ΠΈ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΎΠ² ΡΡΡΠΎΠΊ). ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ GitHub Π°Π²ΡΠΎΡΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ, ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ ΡΠΆΠ°ΡΡΡ Π²Π΅ΡΡΠΈΡ CSS ΡΡΠΈΠ»Π΅ΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Animate.css. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ ΠΈ ΡΠΊΠ°ΡΠ°Π΅ΠΌ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (ΠΊΠ½ΠΎΠΏΠΊΠ° «Clone or Download»). ΠΠ° ΡΡΠ°ΠΏΠ΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΠ°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΈΠ· ΡΠΊΠ°ΡΠ°Π½Π½ΠΎΠ³ΠΎ Π°ΡΡ ΠΈΠ²Π° ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΠ» animate.css (Π½Π΅ ΡΠΆΠ°ΡΠ°Ρ Π²Π΅ΡΡΠΈΡ).
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ Π² ΠΏΠ°ΠΏΠΊΡ Ρ ΠΠ°ΡΠΈΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π³Π° <link>:
<head> <link rel = "stylesheet" href = "animate.css"> </head>
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΡΠ΅Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
@keyframes fadeIn { from { /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ 0%) */ opacity: 0; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ */ } to { /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ 100%) */ opacity: 1; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ */ } } .fadeIn { animation-name: fadeIn; /* ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΈΠΌΠ΅Π½ΠΈ Π² ΠΏΡΠ°Π²ΠΈΠ»Π΅ @keyframes) */ }
ΠΡΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° opacity ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΎ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
ΠΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠΊΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΡΡΡΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΡΡ ΠΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Animate.css. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΡΡΡΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅, Π½ΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°Π½Ρ, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌΠΈ Π°Π²ΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ:
/* Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°ΠΏΡΡΡΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΠ΄ΠΈΠ½ ΡΠΈΠΊΠ» */ .animated { animation-duration: 1s; /* ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 1 ΡΠ΅ΠΊΡΠ½Π΄Π° */ animation-fill-mode: both; /* Π·Π°Π΄Π°Π΅Ρ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ (ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½Π° ΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠ΅Π½Π° - Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ).*/ } /* Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ° .infinite ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΠΊΠ»Π°ΡΡ .animated ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ */ .animated.infinite { animation-iteration-count: infinite; /* Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°ΡΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ */ }
ΠΠ±ΡΠ°ΡΠ°Ρ ΠΠ°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΈ ΠΊΠ»Π°ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠΎΠΌΡ, ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ·ΡΠΊΠ° JavaScript Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΡ -ΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ. ΠΡ Ρ ΠΠ°ΠΌΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΡ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Animate.css ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Animate.CSS</title> <link rel = "stylesheet" href = "animate.css"> <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Animate.css --> </head> <body> <img src = "/images/fair.png" alt = "mishka" width = "200px" height = "200px" class = "animated infinite fadeIn"> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠ»ΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π³Π° <link> Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Animate.css ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠ»ΠΈ (ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π») ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ 3 ΠΊΠ»Π°ΡΡΠ° ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ:
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ.202 ΠΡΠΈΠΌΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Animate.CSS.ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Animations CSS ΡΡΠΎΠΊΠΈ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Π°ΠΊΠ°Π΄Π΅ΠΌΠΈΡ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ CSS
CSS Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JavaScript ΠΈΠ»ΠΈ Flash!
CSS
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ
ΠΠΎΠΌΠ΅ΡΠ° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
ΠΠΎΠΌΠ΅ΡΠ° -WebKit-, -ΠΠΠ-, ΠΈΠ»ΠΈ -o- ΡΠΊΠ°ΠΆΠ°Ρ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π»Π° Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0Β -webkit- | 10.0 | 16.0 5.0Β -moz- | 9.0 4.0Β -webkit- | 30.0 15.0Β -webkit- 12.0 -o- |
animation | 43.0 4.0Β -webkit- | 10.0 | 16.0 5.0Β -moz- | 9.0 4.0Β -webkit- | 30.0 15.0Β -webkit- 12.0Β -o- |
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS?
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ²ΠΎΠΉΡΡΠ² CSS, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ ΡΠ°Π·.
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΡΠΊΠ°Π·Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ Π΄Π΅ΡΠΆΠ°Ρ ΠΊΠ°ΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ.
ΠΡΠ°Π²ΠΈΠ»ΠΎ @keyframes
ΠΡΠΈ ΡΠΊΠ°Π·Π°Π½ΠΈΠΈ ΡΡΠΈΠ»Π΅ΠΉ CSS Π²Π½ΡΡΡΠΈ @keyframes
ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΎΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΡΠΈΠ»Ρ ΠΊ Π½ΠΎΠ²ΠΎΠΌΡ ΡΡΠΈΠ»Ρ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ.
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ «example» ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <div>. ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π΄Π»ΠΈΡΡΡΡ 4 ΡΠ΅ΠΊΡΠ½Π΄Ρ, ΠΈ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <div> ΠΎΡ «Red» Π½Π° «ΠΆΠ΅Π»ΡΡΠΉ»:
ΠΡΠΈΠΌΠ΅Ρ
/* The animation code */@keyframes example {
Β Β Β from {background-color: red;}
Β Β Β to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
Β Β Β width: 100px;
Β Β Β height: 100px;
Β Β Β
background-color: red;
Β Β Β
animation-name: example;
Β Β Β animation-duration: 4s;
}
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° animate.css: ΠΏΡΠΎΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π° css3
ΠΡ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, ΠΎΠ±ΡΠ°ΡΠ°Π»ΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ ΠΏΠΎΠΊΠ°Π·Π΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΠΉΡΠ°Ρ .
ΠΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ, Π½Π΅ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π·Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΡΠ°ΡΡΡΠ»ΠΊΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΠΎΡΡ.
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ² ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²ΠΎΠ²ΡΠ΅ Π½Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ.
ΠΡΠ½ΠΎΠ²ΠΎΠΉ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ±ΠΎΡΠ½ΠΈΠΊ animate.css
ΠΠ½ ΡΠΎΠ·Π΄Π°Π½ ΠΡΠ½ΠΎΠΌ ΠΠ΄Π΅Π½ΠΎΠΌ, Π±ΡΠΈΡΠ°Π½ΡΠΊΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠΌ ΠΈΠ· ΠΠ°Π½ΡΠ΅ΡΡΠ΅ΡΠ°.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ animate.cssΒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π΄Π΅ΡΡ — https://daneden.github.io/animate.css
Π’Π°ΠΌ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ΡΠ°ΠΉΠ» animate.css
ΠΡΠ΅Π½ΠΈΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΠΎΠ΅ΠΉ Π½ΠΎΠ²ΠΎΠΉ ΡΠ΅ΠΌΡ Π΄Π»Ρ wordpress All Services:
— ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ²,
— ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ΅ΠΊΡΡΠ°.
Π§ΡΠΎΠ±Ρ ΠΎΡΠ΅Π½ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ, ΠΏΡΠΎΠΊΡΡΡΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·.
ΠΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π° ΡΠ°ΠΉΡ?
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅:
- Π‘ΠΊΠ°ΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΉΠ» animate.css
- ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ ΡΠ°ΠΉΠ» animate.css
- ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ
- ΠΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΊ Π½ΡΠΆΠ½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
β Π‘ΠΊΠ°ΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΉΠ» animate.css
ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° — https://github.com/daneden/animate.css/blob/master/animate.css .
ΠΠ½Π° ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π΅Π΅ ΠΏΠΎΠ΄ ΡΠ²ΠΎΠΈ Π½ΡΠΆΠ΄Ρ.
ΠΠ»ΠΈ ΡΠΏΠ°ΠΊΠΎΠ²Π°Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ — https://github.com/daneden/animate.css/blob/master/animate.min.css, ΠΎΠ±ΡΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ, Π³ΠΎΠ²ΠΎΡΡ ΡΡΡΡΠΊΠΈΠΌ ΡΠ·ΡΠΊΠΎΠΌ :).
ΠΠ½Π° ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΈ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Ρ Π½Π΅ΠΉ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅.
β ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ ΡΠ°ΠΉΠ» animate.css
ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ Π² functions.php, ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
// register scripts & styles function animate_scripts() { if (!is_admin()) { wp_register_style('animate', esc_url(get_template_directory_uri()). '/css/animate.css'); |
Π£ΡΠ΅Π±Π½ΠΈΠΊ CSS 3. Π‘ΡΠ°ΡΡΡ «ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS. Π§Π°ΡΡΡ 1»
Π Π°Π½Π΅Π΅ Π² ΡΡΠ°ΡΡΠ΅ ΡΡΠ΅Π±Π½ΠΈΠΊΠ° «ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π² CSS» ΠΌΡ Ρ ΠΠ°ΠΌΠΈ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΠΈΡΡ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° CSS ΡΠ²ΠΎΠΉΡΡΠ² ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ (transition). CSS3 ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°ΠΌ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°, Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ°ΠΊΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ².
ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ (Π½Π°Π±ΠΎΡΠ° ΡΠ²ΠΎΠΉΡΡΠ²) ΠΊΠΎ Π²ΡΠΎΡΠΎΠΌΡ, ΠΎΡ Π²ΡΠΎΡΠΎΠ³ΠΎ ΠΊ ΡΡΠ΅ΡΡΠ΅ΠΌΡ, ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΎ.
Π ΠΈΡ. 190 ΠΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π΄ΡΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.ΠΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ, Π΄Π»Ρ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°ΡΡ Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅, Π±ΡΠ΄Ρ ΡΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠΊΡΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΡΠ°ΠΏΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΠ· ΡΠ΅Π³ΠΎ ΠΆΠ΅ ΡΠΎΡΡΠΎΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² CSS. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π§ΡΠΎ ΠΈΠ· ΡΠ΅Π±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ? ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ ΡΠ΅Π±Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²ΠΈΡΡ Π΅Π³ΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄ΠΎ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ ΠΎΠΊΠ½Π° ΠΈ Π²Π΅ΡΠ½ΡΡΡ Π΅Π³ΠΎ Π² ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΡΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠ°:
- ΠΠ΅ΡΠ²ΡΠΉ β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- ΠΡΠΎΡΠΎΠΉ β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΡΠ»Π΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ ΠΎΠΊΠ½Π°.
- Π’ΡΠ΅ΡΠΈΠΉ β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΡΡ ΡΠΎΡΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°).
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ, Π½Π° Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΎΠ·Π»Π°Π³Π°ΡΡΡΡ Π·Π°Π΄Π°ΡΠ° ΠΏΡΠΎΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡ Π²ΡΠ΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠ΅ ΡΠ°Π·Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ². Π’ΠΎ Π΅ΡΡΡ, Π·Π°Π΄Π°ΡΠ° ΠΏΡΠΎΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΡΡΠΈΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠ°Ρ Π»Π΅ΠΆΠΈΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, Ρ Π½Π°ΡΠ΅ΠΉ ΡΡΠΎΡΠΎΠ½Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΈ ΡΠΎΡΠΊΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠΎΠ±ΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΊΠ°ΠΊ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΡΠΈΠ»Ρ ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌΠΈ ΠΊΠ°Π΄ΡΠ°ΠΌΠΈ.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠ°Π³ΠΎΠΌ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠ΅ΠΌΡ Π½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. ΠΡΠΈ ΡΡΠΎΠΌ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ²ΠΎΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠ°Π»Π΅Π΅ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Ρ ΠΠ°ΠΌΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠ°ΠΊ Π·Π°Π΄Π°ΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΈΠΊΠ»ΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, ΡΠΊΠ°Π·Π°ΡΡ Π΅Ρ ΡΠΊΠΎΡΠΎΡΡΡ ΠΈ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π° ΡΠ΅ΠΊΡΡΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Ρ ΠΎΡΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ ΠΠ°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ΅ΠΊΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΠ²ΠΎΠΉΡΡΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ:
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ²
Π CSS ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @keyframes ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠ΅ ΡΡΠ°ΠΏΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΠΎ Π΄Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΡΠ½Π΅Π΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²ΡΡΡΠ½ΡΡ, Π·Π°Π΄Π°Π²Π°Ρ Π΄Π»Ρ Π½Π΅Π΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠ΅ ΡΠ°Π³ΠΈ.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°:
@keyframes animationName { from | % {css-styles} /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ to | % {css-styles} /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ }
- ΠΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (animationName). Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ, ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @keyframes Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ animation-name, Π»ΠΈΠ±ΠΎ Π² ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ animation Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ° ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΠΊΠ°Π΄ΡΠΎΠ² Π² Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π½ΠΎ ΠΎΠ± ΡΡΠΎΠΌ ΠΏΠΎΠ·Π΄Π½Π΅Π΅.
ΠΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΡΡΠΎΡΡΡ ΠΈΠ· Π»Π°ΡΠΈΠ½ΡΠΊΠΈΡ Π±ΡΠΊΠ² Π±Π΅Π· ΡΡΠ΅ΡΠ° ΡΠ΅Π³ΠΈΡΡΡΠ° ΠΎΡ A Π΄ΠΎ Z, ΡΠΈΡΡ ΠΎΡ 0 Π΄ΠΎ 9, Π·Π½Π°ΠΊΠ° ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ (_), ΠΈ/ΠΈΠ»ΠΈ ΡΠΈΡΠ΅ (—). ΠΠ±ΡΠ°ΡΠ°Ρ ΠΠ°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΈΠΌΠ²ΠΎΠ» Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π±ΡΠΊΠ²ΠΎΠΉ (ΡΠΎ Π΅ΡΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ ΡΠΈΡΠ»Π°, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄ Π½ΠΈΠΌ ΡΡΠ°Π²ΠΈΡΡΡ ΡΠΈΡΠ΅). ΠΠ²Π° ΡΠΈΡΠ΅ ΠΏΠΎΠ΄ΡΡΠ΄ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Ρ Π² Π½Π°ΡΠ°Π»Π΅ ΠΈΠΌΠ΅Π½ΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»ΠΎΠ²Π°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ none, unset, initial, ΠΈΠ»ΠΈ inherit Π² Π»ΡΠ±ΠΎΠΌ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ. - CΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° (from | to | %) ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ· ΡΠ΅Π±Ρ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
0%-100% - ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. from - ΡΠΎΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ 0%. to - ΡΠΎΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ 100%.
ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @keyframes Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΏΠΈΡΠΎΠΊ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ², ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ Π·Π°Π΄Π°ΡΡ ΠΏΡΠΎΡΠ΅Π½Ρ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ. Π£ΠΊΠ°Π·Π°ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΌΠ΅Π½Π° ΡΡΠΈΠ»Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ (0% — ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π½Π°ΡΠ°Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, 100% — ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ), ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ² «from» ΠΈ «to», ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ 0% ΠΈ 100%.
ΠΠ»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° ΠΈ Π΅Π³ΠΎ ΠΊΠΎΠ½Π΅Ρ (Π·Π½Π°ΡΠ΅Π½ΠΈΡ 0% | from ΠΈ 100% | to). ΠΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² Π»ΡΠ±ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π½Π΅ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ° (ΠΎΡ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ). ΠΡΠ»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ ΠΆΠ΅ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΠΈΡΡ ΠΈΡ ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ: 0%, 100% {}. - CSS ΡΡΠΈΠ»ΠΈ (css-styles) — ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΡ (Π°Π½ΠΈΠΌΠΈΡΡΠ΅ΠΌΡΡ ) ΡΠ²ΠΎΠΉΡΡΠ² ΡΡΠΈΠ»Ρ CSS. ΠΡΠ»ΠΈ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ Π²Ρ ΡΠ΅ΡΠΈΠ»ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΡ Π² ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Ρ, ΡΠΎ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, Π° ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Ρ Π±ΡΠ΄ΡΡ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ Π² Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. Π£Π·Π½Π°ΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π°Π½ΠΈΠΌΠΈΡΡΠ΅ΠΌΡΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π² ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠ΅ CSS Π² ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠ΅Π³ΠΎ ΠΠ°Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
Π‘Π²ΠΎΠΉΡΡΠ²Π°, ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΌ ΠΊΠ°Π΄ΡΠ΅ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ !important ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ. Π Π°Π½Π΅Π΅ Π² ΡΡΠ°ΡΡΠ΅ «ΠΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡΡ Π² CSS» (ΡΠ°Π·Π΄Π΅Π» «ΠΡΠ°Π½ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ²») ΠΌΡ ΡΠΆΠ΅ Ρ ΠΠ°ΠΌΠΈ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°Π»ΠΈ Π²ΠΎΠΏΡΠΎΡΡ ΠΎΠ± ΠΎΡΠΌΠ΅Π½Π΅ Π·Π½Π°ΡΠΈΠΌΠΎΡΡΠΈ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π°:
@keyframes growElement { /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 0% { /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 50px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: yellow; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } 50% { /* ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π° ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 100px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: green; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } 100% { /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 200px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: red; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } }
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»ΠΈ ΡΡΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΠ°, Π³Π΄Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅. ΠΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊ Π½Π°ΡΠ°Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠ°Π²Π½ΠΎΠΉ 50 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ ΠΈ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΆΠ΅Π»ΡΡΠΉ, ΠΊ 50% ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ) ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠΆΠ΅ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° Π·Π΅Π»Π΅Π½ΡΠΉ, Π° ΠΊ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΊΡΠ°ΡΠ½ΡΠΉ.
ΠΡΠ»ΠΈ Π½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π»ΡΡ Π±Ρ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ (ΡΠΈΡΠΈΠ½Π° ΠΈ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π°), ΡΠΎ ΠΌΡ Π±Ρ ΠΌΠΎΠ³Π»ΠΈ ΡΠΊΠ°Π·Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
@keyframes growElement { 0%, 100% { /* Π½Π°ΡΠ°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 50px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: yellow; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } 50% { /* ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π° ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 100px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: green; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } }
Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ — animation-name, ΠΎΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΈΠ»ΠΈ ΡΠΏΠΈΡΠΎΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΊ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ (ΡΡΡΠ»Π°Π΅ΡΡΡ) Π½Π° ΠΏΡΠ°Π²ΠΈΠ»ΠΎ (@keyframes), ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠΎ Π² ΠΎΠ΄ΠΈΠ½ΠΎΡΠΊΡ ΠΌΡ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΠΌ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΡΡΡΠΈΡΡ Π»ΡΠ±ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ.
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² CSS, Ρ ΠΎΡΡ Π΅ΡΠ΅ ΡΠ°Π· ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½Π° ΡΠΎ ΡΡΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ ΠΌΡ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π²Π΅Π½Π΄ΠΎΡΠ½ΡΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΡ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΡΠΎ ΡΡΠΎΠΈΡ ΠΎ Π½ΠΈΡ Π½Π΅ Π·Π°Π±ΡΠ²Π°ΡΡ ΠΈ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ²:
/* Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΡΠ°ΡΡΡ Π²Π΅ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Mozilla */ @-moz-keyframes growElement { /* ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ */ } /* Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΡΠ°ΡΡΡ Π²Π΅ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Chrome, Opera, Safari */ @-webkit-keyframes growElement { /* ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ */ } /* ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ */ @keyframes growElement { /* ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ */ }
ΠΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ animation-* ΠΈ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation, ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ @keyframes, ΡΡΠ΅Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π²Π΅Π½Π΄ΠΎΡΠ½ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² (-moz- ΠΈ βwebkit-) Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΎΠ³ΠΎ ΠΊΡΡΠ³Π° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ, ΡΡΠΎΠ±Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°ΡΠ°Π»Π° Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΅Ρ ΠΈΠΌΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠ°Π²ΠΈΠ»Π΅ @keyframes ΠΈ Π·Π°Π΄Π°ΡΡ Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ. Π CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation-duration ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΠ½Π΄, ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄ Π·Π°ΡΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Ρ Π½Π°Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π΅Ρ ΠΊ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠ΅ΠΌΡ Π½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ, Π΅ΡΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΊ ΡΡΠΈΠ»Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½Π° ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² CSS</title> <style> div { width: 50px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ height: 50px; /* Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: yellow; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ margin-top: 20px; /* Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ */ } div:nth-child(1) { /* ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ */ animation-duration: 2s; /* ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 2 ΡΠ΅ΠΊΡΠ½Π΄Ρ */ } div:nth-child(2) { /* Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ */ animation-duration: 4s; /* ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 4 ΡΠ΅ΠΊΡΠ½Π΄Ρ */ } div:nth-child(3) { /* ΡΡΠ΅ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ */ animation-duration: 900ms; /* ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 900 ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄ */ } div:hover { /* Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> */ animation-name: growElement; /* Π·Π°Π΄Π°Π΅ΠΌ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } @keyframes growElement { 0% { /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 50px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: yellow; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } 50% { /* ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π° ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 100px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: green; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } 100% { /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 200px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: red; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } } </style> </head> <body> <div>2s</div> <div>4s</div> <div>900ms</div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΊ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΠΈ ΠΊ ΠΊΠΎΠ½ΡΡ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π‘ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° :nth-child() ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-duration ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <div> Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠ²ΠΎΠ³ΠΎ Π½ΠΎΠΌΠ΅ΡΠ° Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°ΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΡΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ animation-name Π·Π°Π΄Π°Π΅Ρ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <div> Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π°Π²Π΅Π΄Π΅Π½ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ (ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover()).
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 191 ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² CSS.Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΠΈ Π½Π°Π·Π½Π°ΡΠΈΠΌ ΠΈΡ ΠΎΠ΄Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°</title> <style> div { width: 50px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ height: 50px; /* Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: yellow; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ margin-top: 20px; /* Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ */ animation-duration: 3s; /* ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 3 ΡΠ΅ΠΊΡΠ½Π΄Ρ */ } div:hover { animation-name: growElement, skewElement; /* Π·Π°Π΄Π°Π΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΠ΅Π½ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */ } @keyframes growElement { 0%, 100% { /* Π½Π°ΡΠ°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 50px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: yellow; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } 50% { /* ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π° ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ width: 300px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ background-color: green; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } } @keyframes skewElement { 5%, 100% { /* 5% ΠΈ 100% (ΠΊΠΎΠ½Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ) ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ transform: skew(0deg); /* ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ Π½Π°ΠΊΠ»ΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ } 50% { /* ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π° ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ transform: skew(-50deg); /* Π½Π°ΠΊΠ»ΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠΈ X (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΎΡΡ) Π½Π° -50 Π³ΡΠ°Π΄ΡΡΠΎΠ². */ } 95% { /* 95% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ transform: skew(50deg); /* Π½Π°ΠΊΠ»ΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠΈ X (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΎΡΡ) Π½Π° 50 Π³ΡΠ°Π΄ΡΡΠΎΠ². */ } } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π°, ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π½Π°ΠΊΠ»ΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠΈ X (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΎΡΡ) ΠΊ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊ ΠΊΠΎΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°Π΅ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΈ Π½Π°ΠΊΠ»ΠΎΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΠΎΡΠΈ X Π² ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎΠΌ animation-duration ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <div> ΡΠ°Π²Π½ΡΡ ΡΡΠ΅ΠΌ ΡΠ΅ΠΊΡΠ½Π΄Π°ΠΌ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°ΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΡΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ animation-name Π·Π°Π΄Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <div> Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π°Π²Π΅Π΄Π΅Π½ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ (ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover()).
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 192 Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠΈΠΊΠ»ΠΎΠ²
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π»ΡΠ±Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² CSS Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Ρ animation-iteration-count ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°ΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠΈΠΊΠ», ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΡΠ°Π·, Π»ΠΈΠ±ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π·Π°ΠΏΡΠ΅ΡΠ°Π΅ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ, Π½ΠΎ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π΅ ΡΠ΅Π»ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° — ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 1.5 ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° ΠΏΠΎΠ»ΡΠΎΡΠ° ΡΠ°Π·Π°).
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ</title> <style> div { width: 50px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ height: 50px; /* Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ border-radius: 100%; /* ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΎΡΠΌΡ ΡΠ³Π»ΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΠΊΡΡΠ³Π»ΡΠ΅ΠΌ) */ display: inline-block; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΠΎ-ΡΡΡΠΎΡΠ½ΡΠ΅ (Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ Π² Π»ΠΈΠ½Π΅ΠΉΠΊΡ) */ color: white; /* ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° */ padding: 15px; /* Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎ Π²ΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½ */ position: relative; /* ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (Π΄Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ) */ text-align: center; /* Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΠΌ ΡΠ΅ΠΊΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ */ line-height: 50px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ */ animation-duration: 1.5s; /* Π·Π°Π΄Π°ΡΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 1,5 ΡΠ΅ΠΊΡΠ½Π΄Ρ */ animation-name: iliketomoveit; /* Π·Π°Π΄Π°ΡΠΌ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } .test { animation-iteration-count: 1; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ 1 ΡΠ°Π· */ } .test2 { animation-iteration-count: 2; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ 2 ΡΠ°Π·Π° */ } .test3 { animation-iteration-count: 3.5; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ 3 Ρ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½ΠΎΠΉ ΡΠ°Π·Π° */ } .test4 { animation-iteration-count: infinite; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ */ } @keyframes iliketomoveit { 0% {top: 0px;} /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 25% {top: 200px; background: red;} /* 25% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 75% {top: 100px;} /* 75% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 100% {top: 0px; background: black;} /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } </style> </head> <body> <a href = "javascript:window.location.reload()">ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠΌ</a></br> <div class = "test">1</div> <div class = "test2">2</div> <div class = "test3">3.5</div> <div class = "test4">infinite</div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° top ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΊΠ»Π°ΡΡΠ° ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-iteration-count ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°Π½ΠΈΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΈ ΡΡΡΠ»ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ URL ΠΏΡΠ΅Π²Π΄ΠΎΠΏΡΠΎΡΠΎΠΊΠΎΠ»Π° javascript:, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠ΄ ΡΠ·ΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ JavaScript ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ΅ ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠΎ ΡΠ΅ΡΠ°Π΅Ρ Π½Π°ΡΡ Π·Π°Π΄Π°ΡΡ ΠΏΠΎ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ URL ΠΏΡΠ΅Π²Π΄ΠΎΠΏΡΠΎΡΠΎΠΊΠΎΠ» javascript: Π½Π° ΡΠ²ΠΎΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ . Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΠ° ΡΠ΅ΠΌΠ° Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΠΈ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ CSS Π² ΡΠ΅Π»ΠΎΠΌ, ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π° ΡΡΠΎΠΌ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡΡ.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 193 ΠΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² CSS.ΠΠ°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation-delay ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠ°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π·Π°Π΄Π°Π΅ΡΡΡ Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ (s), ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ (ms).
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ 0s (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-delay, ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°ΡΠ°ΡΡΡΡ Π±Π΅Π· Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ. ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°ΡΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ, ΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°ΡΠ½Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Π±Π΅Π· Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ, Π½ΠΎ ΡΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π²Π½ΠΎΠΌΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (Ρ.Π΅. Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°ΠΆΠΈΡΠ΅ -5s, ΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½Π° Π±Π΅Π· Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ ΠΈ Ρ ΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΎΠ½Π° ΡΠΆΠ΅ Π΄Π»ΠΈΡΡΡ 5 ΡΠ΅ΠΊΡΠ½Π΄). ΠΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ (Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ).
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΠ°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ</title> <style> div { width: 75px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ height: 75px; /* Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ border-radius: 100%; /* ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΎΡΠΌΡ ΡΠ³Π»ΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ position: relative; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ animation-name: iliketomoveit; /* Π·Π°Π΄Π°ΡΠΌ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-duration: 5s; /* Π·Π°Π΄Π°ΡΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-iteration-count: infinite; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ */ } .test { animation-delay: -500ms; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ ΡΠ°Π²Π½ΡΡ -500ms (Π±Π΅Π· Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ ΡΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ) */ } .test2 { animation-delay: 1500ms; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ°Π²Π½ΡΡ 1500 ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄ */ } .test3 { animation-delay: 2s; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ°Π²Π½ΡΡ 2 ΡΠ΅ΠΊΡΠ½Π΄Ρ */ } @keyframes iliketomoveit { 0% {left: 0px;} /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 25% {left: 400px; background: red;} /* 25% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 75% {left: 200px;} /* 75% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 100% {left: 0px; background: black;} /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } </style> </head> <body> <a href = "javascript:window.location.reload()">ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠΌ</a></br> <div class = "test">-500ms</div> <div class = "test2">1500ms</div> <div class = "test3">2s</div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΊΠ»Π°ΡΡΠ° ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-delay ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 194 ΠΠ°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² CSS.Π‘ΠΊΠΎΡΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ (transition) Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΊΡΠΈΠ²ΡΡ ΡΠΊΠΎΡΠΎΡΡΠΈ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡ — ΠΊΡΠ±ΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΊΡΠΈΠ²Π°Ρ ΠΠ΅Π·ΡΠ΅). ΠΡΠΈΠ²Π°Ρ ΡΠΊΠΎΡΠΎΡΡΠΈ Π·Π°Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-timing-function ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΠ΅ΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ CSS Π½Π° Π΄ΡΡΠ³ΠΎΠΉ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π½ΠΈΠΆΠ΅ Π² ΡΠ°Π±Π»ΠΈΡΠ΅:
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
ease | ΠΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, Π·Π°ΡΠ΅ΠΌ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΡΡΠ΅ΡΡΡ ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΎΠΏΡΡΡ Π·Π°ΠΌΠ΅Π΄Π»ΡΠ΅ΡΡΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ cubic-bezier(0.25,0.1,0.25,1). ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
linear | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΡΡ ΠΎΡ Π½Π°ΡΠ°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ cubic-bezier(0,0,1,1). Π’ΠΎΡΠΊΠ° 1 ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° Π½Π° 0 ΠΏΠΎ ΠΎΡΠΈ X ΠΈ ΠΏΠΎ ΠΎΡΠΈ Y, ΡΠΎΡΠΊΠ° 2 β Π½Π° 1 ΠΏΠΎ ΠΎΡΠΈ X ΠΈ ΠΏΠΎ ΠΎΡΠΈ Y. |
ease-in | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠ°ΡΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ cubic-bezier(0.42,0,1,1). |
ease-out | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠ΅ΠΌ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ cubic-bezier(0,0,0.58,1). |
ease-in-out | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠ°ΡΡΠ° ΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠ΅ΠΌ (ΡΠΈΠΌΠΌΠ΅ΡΡΠΈΡΠ½Π°Ρ ΠΊΡΠΈΠ²Π°Ρ ΠΠ΅Π·ΡΠ΅). ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ cubic-bezier(0.42,0,0.58,1). Π’ΠΎΡΠΊΠ° 1 ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° Π½Π° 0,42 ΠΏΠΎ ΠΎΡΠΈ X ΠΈ Π½Π° 0 ΠΏΠΎ ΠΎΡΠΈ Y, ΡΠΎΡΠΊΠ° 2 β Π½Π° 0,58 ΠΏΠΎ ΠΎΡΠΈ X ΠΈ Π½Π° 1 ΠΏΠΎ ΠΎΡΠΈ Y. |
cubic-bezier(n,n,n,n) | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΊΡΠ±ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΠ΅Π·ΡΠ΅. ΠΠ½Π° Π΄ΠΎΠΏΡΡΠΊΠ°Π΅Ρ 4 ΡΠΈΡΠ»ΠΎΠ²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡ 0 Π΄ΠΎ 1. ΠΠ΅ΡΠ²ΡΠ΅ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ β ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ X ΠΈ Y ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠΎΡΠΊΠΈ, Π° Π²ΡΠΎΡΡΠ΅ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ β ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ X ΠΈ Y Π²ΡΠΎΡΠΎΠΉ ΡΠΎΡΠΊΠΈ). ΠΠ° Π΄Π°Π½Π½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ Π΄Π»Ρ ΠΠ°Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. |
steps(int,start|end) | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, Ρ Π΄Π²ΡΠΌΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ. ΠΠ΅ΡΠ²ΡΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Π·Π°Π΄Π°Π΅Ρ ΡΠΈΡΠ»ΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠ² Π² ΡΡΠ½ΠΊΡΠΈΠΈ (ΡΠ΅Π»ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ (Π±ΠΎΠ»ΡΡΠ΅ 0). ΠΡΠΎΡΠΎΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ «start» ΠΈΠ»ΠΈ «end» ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΎΡΠΊΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π°. ΠΡΠ»ΠΈ Π²ΡΠΎΡΠΎΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΎΠΏΡΡΠ΅Π½, ΡΠΎ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ «end». ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ «start» ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π² Π½Π°ΡΠ°Π»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°Π³Π°, Π° «end» Π² ΠΊΠΎΠ½ΡΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°Π³Π°. |
step-start | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ steps(1, start). Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΠ°Π·Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π³Π° Π² ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΌ ΠΊΠ°Π΄ΡΠ΅. |
step-end | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ steps(1, end). Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΠ°Π³Π°. |
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΅Ρ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΡΠΈΠ»ΡΡ ΡΡΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°:
@keyframes iliketomoveit { 0% {left: 0px;} 25% {left: 400px; animation-timing-function: linear ;} /* ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ Π΄Π»Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° */ 75% {left: 200px;} 100% {left: 0px;} }
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ:
animation-name: "animationName1, animationName2, animationName3"; animation-timing-function: "linear, ease, ease-in";
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΡΠΈΠ²ΡΡ ΡΠΊΠΎΡΠΎΡΡΠΈ:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Π‘ΠΊΠΎΡΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² CSS</title> <style> div { width: 45px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ height: 45px; /* Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ color: white; /* ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° Π±Π΅Π»ΡΠΉ */ background: green; /* ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ margin-bottom: 5px; /* Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ position: relative; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ animation-name: iliketomoveit; /* Π·Π°Π΄Π°ΡΠΌ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-duration: 5s; /* Π·Π°Π΄Π°ΡΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-iteration-count: infinite; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ */ } .test { timing-function: ease; /* ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, Π·Π°ΡΠ΅ΠΌ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΡΡΠ΅ΡΡΡ ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΎΠΏΡΡΡ Π·Π°ΠΌΠ΅Π΄Π»ΡΠ΅ΡΡΡ */ } .test2 { timing-function: linear; /* ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΡΡ ΠΎΡ Π½Π°ΡΠ°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° */ } .test3 { timing-function: ease-in; /* ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠ°ΡΡΠ° */ } .test4 { timing-function: ease-out; /* ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠ΅ΠΌ */ } .test5 { timing-function: ease-in-out; /* ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΡΡΠ°ΡΡΠΎΠΌ ΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠ΅ΠΌ */ } .test6 { timing-function: cubic-bezier(.94,.06,.83,.67); /* ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΊΡΠ±ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΠ΅Π·ΡΠ΅ */ } @keyframes iliketomoveit { 0% {left: 0px ;} /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 25% {left: 400px ;} /* 25% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 75% {left: 200px ;} /* 75% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 100% {left: 0px ;} /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } </style> </head> <body> <div class = "test">ease</div> <div class = "test2">linear</div> <div class = "test3">ease-in</div> <div class = "test4">ease-out</div> <div class = "test5">ease-in-out</div> <div class = "test6">cubic-bezier</div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
Π‘ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΊΠ»Π°ΡΡΠ° ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-timing-function ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΊΠΎΡΠΎΡΡΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠ°ΠΊ: ease, linear, ease-in, ease-out, ease-in-out ΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠ΅ (ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅) Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΊΡΠ±ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΠ΅Π·ΡΠ΅.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 195 ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-timing-function.Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>ΠΡΠΈΠΌΠ΅Ρ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² CSS</title> <style> div { width: 70px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ° */ height: 70px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° */ color: white; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° Π±Π΅Π»ΡΠΉ */ background: green; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ margin-bottom: 5px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΎΡΡΡΡΠΏ ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ position: relative; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ animation-name: iliketomoveit; /* Π·Π°Π΄Π°ΡΠΌ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΈΠΌΠ΅Π½ΠΈ Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠΌΡ Π² ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠ°Ρ ) */ animation-duration: 5s; /* Π·Π°Π΄Π°ΡΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ animation-iteration-count: infinite; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ */ } .test { animation-timing-function: steps(3, end); /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΡ */ } .test2 { animation-timing-function: steps(3, start); /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΡ */ } .test3 { animation-timing-function: step-start; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΡ - ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ steps(1, start) */ } .test4 { animation-timing-function: step-end; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΡ - steps(1, end) */ } @keyframes iliketomoveit { 0% {left: 0px;} /* Π½Π°ΡΠ°Π»ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 25% {left: 400px;} /* 25% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 75% {left: 200px;} /* 75% ΠΎΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ 100% {left: 0px;} /* ΠΊΠΎΠ½Π΅Ρ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ */ } </style> </head> <body> <div class = "test">steps(3, end)</div> <div class = "test2">steps(3, start)</div> <div class = "test3">step-start</div> <div class = "test4">step-end</div> </body> </html>
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
Π‘ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΊΠ»Π°ΡΡΠ° ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation-timing-function ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ, ΡΡΠΎ Π½Π° ΠΊΠ°ΠΆΠ΄ΡΡ ΡΠ°ΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΎ 3 ΡΠ°Π³Π° (Π½Π°ΡΠ°Π»ΠΎ ΡΠΎΡΠΊΠΈ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°/ΠΊΠΎΠ½Π΅Ρ ΡΠΎΡΠΊΠΈ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°), Π»ΠΈΠ±ΠΎ 1 ΡΠ°Π³ (ΡΠΎΡΠΊΠΈ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°/ΠΊΠΎΠ½Π΅Ρ ΡΠΎΡΠΊΠΈ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°) Π΄Π»Ρ ΡΡΠ½ΠΊΡΠΈΠΉ step-start ΠΈ step-end.
ΠΠ»Π°Π²Π½ΠΎΠ΅, ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΡΡΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ°Π³ΠΎΠ², ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ, Π° Π½Π΅ Π½Π° Π²ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΎΡΠΈΡ Π±ΠΎΠ»ΡΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, Π° Π½Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΡΡ, ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π² ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠΌ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΠ»ΠΈ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΡΡ.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΠΈΡ. 196 ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ.Π²ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ β ΡΡΠ΅Π±Π½ΠΈΠΊ CSS
ΠΡΠ°ΠΊ, ΠΌΡ Ρ Π²Π°ΠΌΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π²ΠΎΡΠ΅ΠΌΡ ΡΠ°Π·Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΠ»ΠΈ Π·Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· Π½ΠΈΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, Π΄Π° Π΅ΡΠ΅ ΠΈ Π½Π΅ Π·Π°Π±ΡΡΡ ΠΏΡΠΎ Π²Π΅Π½Π΄ΠΎΡΠ½ΡΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡΡ, ΡΠΎ Π² ΠΎΠ±ΡΠ΅ΠΉ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ Π±ΠΎΠ»Π΅Π΅ 30 ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ!
Π ΡΡΠ°ΡΡΡΡ, ΠΊΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Ρ transition, Π² CSS Π΅ΡΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation
, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠ°Π·Ρ Π²ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, ΡΠ°Π·Π΄Π΅Π»ΡΡ ΠΈΡ
ΠΏΡΠΎΠ±Π΅Π»ΠΎΠΌ. ΠΠ»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ Π½ΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π²Π°ΡΠΈΠ°Π½ΡΡ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΈ ΠΊΠΎΡΠΎΡΠΊΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ Π²ΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (Π΄Π»Ρ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΠΈ ΠΌΠ΅ΡΡΠ° ΠΌΡ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π»ΠΈ Π² Π½Π°Ρ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΠΈΡ
ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ):
div { animation-name: coolAnimation; animation-duration: 3s; animation-timing-function: ease-in; animation-delay: 500ms; animation-iteration-count: 6; animation-direction: reverse; animation-fill-mode: forwards; animation-play-state: paused; } /* Π‘ΡΠΈΠ»Ρ Π²ΡΡΠ΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ΅Π½ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ: */ div { animation: coolAnimation 3s ease-in 500ms 6 reverse forwards paused; }
ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· Π²ΠΎΡΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π²Π΅Π΄Ρ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π²Π° β animation-name
ΠΈ animation-duration
. Π Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠ΅ΡΠΈΠΉ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ (ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, animation-iteration-count
), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΡΡ Π·Π°ΠΏΠΈΡΡ:
div { animation: coolAnimation 3s 6; }
ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΠΈ Π·Π°Π΄Π°ΡΡ ΠΈΠΌ ΡΠ°Π·Π½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΡ Π³ΡΡΠΏΠΏΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠ΄Π΅Π»ΡΡΡ Π·Π°ΠΏΡΡΠΎΠΉ, Π° Π² ΠΊΠΎΠ½ΡΠ΅ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠΎΡΠΊΡ Ρ Π·Π°ΠΏΡΡΠΎΠΉ:
div { animation: firstAnimation 300ms ease-in, secondAnimation 1s linear alternate; }
ΠΠ°Π»Π΅Π΅ Π² ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅ Π²Π°Ρ ΠΆΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΡΠΎΠΊ ΠΏΠΎ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π³Π΄Π΅ ΠΌΡ ΠΏΠΎΡΡΠ΅Π½ΠΈΡΡΠ΅ΠΌΡΡ Π² ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° transform, Π° ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΠ΅ CSS-ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ transition, ΡΠ°ΠΊ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ Π²Π΅ΡΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° animation.
15 Π»ΡΡΡΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² CSS3-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡΡΡ Π² ΡΡΡΠ΄ΠΎΠ΅ΠΌΠΊΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ, ΠΈ Π·Π΄Π΅ΡΡ ΠΏΡΠΈΠ³ΠΎΠ΄ΡΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠ΅Π½Ρ Π»ΡΡΡΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS3.
Magic CSS3 Animations β ΡΡΠΎ ΠΏΠ°ΠΊΠ΅Ρ CSS3-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΡΠΎ ΡΠΏΠ΅ΡΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π»ΡΠ±ΡΡ
Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ². ΠΡΠΎΡΡΠΎ Π²ΠΊΠ»ΡΡΠΈΡΠ΅ ΡΡΠΈΠ»Ρ CSS magic.css ΠΈΠ»ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ magic.min.css.
CSS3 Animation Cheat Sheet ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π½Π°Π±ΠΎΡ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ plug-and-play Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ². ΠΠ»Ρ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»ΠΈ Π½Π° ΡΠ°ΠΉΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ. CSS3 Animation Cheat Sheet ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @keyframes ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ
ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² (Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π² IE 10).
CSS3 Keyframes Animation Generator ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° @keyframes.
ΠΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ CSS. ΠΡΡΠ΅ΠΊΡΡ ΡΠ°ΡΡΠΎΡΡΠΈΡΠΎΠ²Π°Π½Ρ ΠΏΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠΌ (ΠΌΠ°Π³ΠΈΡ, ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π°, Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅, ΠΌΠ΅ΡΡΠ°Π½ΠΈΠ΅, ΡΡΠ°ΡΠΈΠΊΠ°, ΡΠ»Π°ΠΉΠ΄Ρ, CSS3 Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ), ΠΈ Π²ΡΠ΅ ΠΎΠ½ΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ
ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ. Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ
β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈ ΠΊΠ»Π°ΡΡΡ ΠΊ ΡΠ΅Π»Π΅Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ΅ΡΠ΅Π· JavaScript.
Animate.css ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°Π±ΠΎΡ ΠΊΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS3-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΡΠ΅ΠΊΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠΎ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΡΠ΅ΡΠ΅Ρ. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠΎΡΠΎΡΠΊΠΈΠΉ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ»ΠΈ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS3 ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
Hover.CSS β ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° CSS3, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄Π»Ρ ΠΏΡΠΈΠ·ΡΠ²Π° ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°ΠΌ, ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠ»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠΎΠ΄ ΡΡΡΠ΅ΠΊΡΠ° Π² CSS ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° Π΅Π³ΠΎ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ.
AniJS β ΡΡΠΎ Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΠΊΠΎΡΠΈΡΡ ΠΈ ΠΎΠ±ΠΎΠ³Π°ΡΠΈΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ. ΠΠ½Π° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π° ΠΈ ΠΏΡΠΎΡΡΠ° Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ.
ProgressJs β ΡΡΠΎ JavaScript ΠΈ CSS3 Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ°ΠΌΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ (ΠΏΡΠΎΠ³ΡΠ΅ΡΡ-Π±Π°ΡΠ°ΠΌΠΈ). ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ-Π±Π°ΡΠ° ΠΈΠ»ΠΈ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ.
Keyframer β ΡΡΠΎ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ CSS3 Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. Πeyframer Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ ΠΏΠΎ ΡΠΊΠ°Π»Π΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π° Π·Π°ΡΠ΅ΠΌ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ CSS-ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΊΡΠ΅ΡΡΠΈΠΊΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡΠΈΠΉ ΠΊΠ°Π΄Ρ.
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS3-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π³ΡΠ°ΡΠΈΠΊΠ°, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π΅, ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ CSS-ΠΊΠΎΠ΄ ΠΈ Π²ΡΠ΅ Π³ΠΎΡΠΎΠ²ΠΎ!
CSSketch β ΡΡΠΎ Sketch 3 ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΡΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½, Π²ΠΊΠ»Π°Π΄ΡΠ²Π°Ρ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ·ΡΠΊ ΡΡΠΈΠ»Π΅ΠΉ {less}. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅. CSSketch β ΡΡΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π½Π΅ΡΡΠΈ ΡΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ Π² Π΅Π³ΠΎ ΡΠ°Π·Π²ΠΈΡΠΈΠ΅.
JQuery-ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΈ ΠΈ CSS3 Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠΎΠ½Π°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ (ΡΠΊΠΎΡΠΎΡΡΡ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ), ΡΡΡΠ΅ΠΊΡ (ΡΠ²Π΅Ρ, ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΈ ΡΠ°Π·ΠΌΡΡΠΈΠ΅) ΠΈ Π·Π°Π΄Π°ΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈΠ»ΠΈ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠΌΠ΅Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ.
ΠΡΠΎ ΡΡΠ΅Π΄ΡΡΠ²ΠΎ Π΄Π»Ρ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠΊΠ°Π·ΠΎΡΡΡΠΎΠΉΡΠΈΠ²ΠΎΡΡΠΈ (ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠΉ Π΄Π΅Π³ΡΠ°Π΄Π°ΡΠΈΠΈ) ΠΊΠΎΠ΄Π° CSS3. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² IE 6-8 Π²Π΅ΡΡΠΈΠΈ.
GFX β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° 3D CSS3 Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°ΡΡΠΈΡΡΠ΅Ρ JQuery Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS3 ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° setTimeout.
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β«15 Best CSS3 Animation Tools for DevelopersΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄ΡΡΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.ΡΡ