ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ β CSS | MDN
Experimental
ΠΡΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½Π°Ρ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΡΠΎΠΉ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΅ΡΡ Π½Π΅ ΡΡΠ°Π±ΠΈΠ»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π»Π°ΡΡ, ΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. Π’Π°ΠΊΠΆΠ΅ Π·Π°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ Π² Π±ΡΠ΄ΡΡΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π²ΡΠ»Π΅Π΄ Π·Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
CSS Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΎΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ CSS ΡΡΠΈΠ»Π΅ΠΉ ΠΊ Π΄ΡΡΠ³ΠΎΠΉ. CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· Π΄Π²ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²: ΡΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ Π½Π°Π±ΠΎΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ², ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π°Π½ΠΈΠΌΠΈΡΡΠ΅ΠΌΡΡ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΡΡΡ ΡΡΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- ΠΡΠΎΡΡΠΎΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ; ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π½Π΅ Π·Π½Π°Ρ JavaScript.
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΈ Π±ΡΠ΄ΡΡ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½Π½ΡΡ Π½Π°Π³ΡΡΠ·ΠΊΠ°Ρ ΡΠΈΡΡΠ΅ΠΌΡ. ΠΡΠΎΡΡΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π° JavaScript, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΠ»ΠΎΡ ΠΎ Π½Π°ΠΏΠΈΡΠ°Π½Ρ, ΡΠ°ΡΡΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΠ»ΠΎΡ ΠΎ. ΠΠ²ΠΈΠΆΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ frame-skipping ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π½Π° ΡΠ°ΠΊΠΎΠΌ Π²ΡΡΠΎΠΊΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ .
- ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΌΠ΅Π½ΡΡΠ°Ρ ΡΠ°ΡΡΠΎΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΊΠ°Π΄ΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² Π½Π΅ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΡΡ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ .
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΡΠΈΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ
ΠΎΡΠΈΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation
ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΠ°ΠΌ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡΠΎΡΠ΅ΠΊΠ°ΡΡ. ΠΡΠΎ Π½Π΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΠ°ΠΌ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ @keyframes
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ 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>
(ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΈΠ»ΠΈ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ 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- ΡΠΊΠ°ΠΆΠ°Ρ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π»Π° Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ | |||||
---|---|---|---|---|---|
@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;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ 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
ΠΡΠ°Π²ΠΈΠ»ΠΎ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΎΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΡΠΈΠ»Ρ ΠΊ Π½ΠΎΠ²ΠΎΠΌΡ ΡΡΠΈΠ»Ρ
Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ.
Π§ΡΠΎΠ±Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°Π±ΠΎΡΠ°Π»Π°, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Β«ΠΏΡΠΈΠΌΠ΅ΡΒ» Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΡΠΈΠΌΠ΅Ρ
/ * ΠΠΎΠ΄ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ * /ΠΡΠΈΠΌΠ΅Ρ @keyframes {
ΠΈΠ· {background-color: red;}
ΠΊ {background-color: yellow;}
}
/ * ΠΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ * /
div {
width: 100px;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΊΡΠ°ΡΠ½ΡΠΉ;
ΠΈΠΌΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: ΠΏΡΠΈΠΌΠ΅Ρ;
ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: 4 Ρ;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ animation-duration
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π½ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation-duration
Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ,
Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ β 0 Ρ (0 ΡΠ΅ΠΊΡΠ½Π΄).
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΈΠ»Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Β«ΠΎΡΒ» ΠΈ Β«Π΄ΠΎΒ» (ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ 0% (Π½Π°ΡΠ°Π»ΠΎ) ΠΈ 100% (Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΎ)).
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠ»Ρ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°
ΠΡΠΈΠΌΠ΅Ρ
/ * ΠΠΎΠ΄ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ * /ΠΏΡΠΈΠΌΠ΅Ρ @keyframes {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/ * ΠΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ * /
div {
ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΊΡΠ°ΡΠ½ΡΠΉ;
ΠΈΠΌΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: ΠΏΡΠΈΠΌΠ΅Ρ;
ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: 4 Ρ;
}
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π±ΡΠ΄ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ ΠΈ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΡ
ΠΡΠΈΠΌΠ΅Ρ
/ * ΠΠΎΠ΄ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ * /ΠΏΡΠΈΠΌΠ΅Ρ @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-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΅ΡΡΡ ΡΡΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠΉ ΡΡΠ΅Π½Π°ΡΠΈΡΠΌΠΈ:
- ΠΡ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ; Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΡ , Π΄Π°ΠΆΠ΅ Π½Π΅ Π·Π½Π°Ρ JavaScript.
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΡΡΠ΅Π΄Π½Π΅ΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ. ΠΡΠΎΡΡΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ°ΡΡΠΎ ΠΏΠ»ΠΎΡ ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² JavaScript. ΠΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠΏΡΡΠΊ ΠΊΠ°Π΄ΡΠΎΠ² ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΠΎΠΉ.
- Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΌΠ΅Π½ΡΡΠ°Ρ ΡΠ°ΡΡΠΎΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, Π·Π°ΠΏΡΡΠ΅Π½Π½ΡΡ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ.
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ 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-Π΅Π΄ΠΈΠ½ΠΈΡ Π½Π΅ Π²Π»ΠΈΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°
Π°Π½ΠΈΠΌΠ°ΡΠΈΡ | 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-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ.
.