Infinite animation css: animation-name — CSS | MDN
animation-name — CSS | MDN
Experimental
ΠΡΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½Π°Ρ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΡΠΎΠΉ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΅ΡΡ Π½Π΅ ΡΡΠ°Π±ΠΈΠ»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π»Π°ΡΡ, ΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. Π’Π°ΠΊΠΆΠ΅ Π·Π°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ Π² Π±ΡΠ΄ΡΡΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π²ΡΠ»Π΅Π΄ Π·Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation-name
Π·Π°Π΄Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠΌΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ @keyframes
(en-US), ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°Π΄Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Π§Π°ΡΡΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation
Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π²ΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;
animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;
animation-name: initial
animation-name: inherit
animation-name: unset
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
none
- ΠΡΠΎ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΠ΅Π΅ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ². ΠΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π΄Π»Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎΡΡΠ΄ΠΊΠ°Β Π΄ΡΡΠ³ΠΈΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ², ΠΈΠ»ΠΈ Π΄Π»Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΠΎΡΡΡΠΏΠ°ΡΡΠ΅ΠΉ ΠΈΠ· ΠΊΠ°ΡΠΊΠ°Π΄Π°.
<custom-ident>
- Π‘ΡΡΠΎΠΊΠ°, ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. ΠΡΠΎΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ Π±ΡΠΊΠ² Π±Π΅Π· ΡΡΡΡΠ° ΡΠ΅Π³ΠΈΡΡΡΠ° ΠΎΡ
Π΄ΠΎ az
, ΡΠΈΡΡ ΠΎΡ0
Π΄ΠΎ9
, ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΡ (_
), ΠΈ/ΠΈΠ»ΠΈ ΡΠ΅ΡΡΡ (-
). ΠΠ΅ΡΠ²ΡΠΉ ΡΠΈΠΌΠ²ΠΎΠ» Π±Π΅Π· ΡΠ΅ΡΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π±ΡΠΊΠ²ΠΎΠΉ (ΡΠΎ Π΅ΡΡΡ, Π±Π΅Π· ΡΠΈΡΡΡ Π² Π½Π°ΡΠ°Π»Π΅, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄ Π½ΠΈΠΌ ΡΡΠΎΠΈΡ ΡΠ΅ΡΡΠ°. ) ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π²Π΅ ΡΠ΅ΡΡΡ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Ρ Π² Π½Π°ΡΠ°Π»Π΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°. ΠΠ½ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡnone
,unset
,initial
, ΠΈΠ»ΠΈinherit
Π² Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΡΠ»ΡΡΠ°Π΅Π².
Π€ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? |
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ 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;}
}
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 | ΠΠ°Π΄Π°Π΅Ρ ΠΊΡΠΈΠ²ΡΡ ΡΠΊΠΎΡΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ |
ΠΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ Π½Π°Β ΡΠΈΡΡΠΎΠΌΒ CSS β ΠΠ»ΠΎΠ³ HTML Academy
ΠΠ½Π°Π½ΠΈΠ΅ Π‘SS Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ΄ΠΎΠ±Π½ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ ΠΈΒ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ°: ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊΠΈ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΒ Π΅ΡΡ cΒ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΡΡΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ ΠΈΒ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. Π‘ΠΎΠ±ΡΠ°Π»ΠΈ ΠΏΡΡΡ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ·ΡΠΊΠ°.
ΠΠΎΠ³ΠΎΡΠΈΠΏΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ²
ΠΠ°ΡΠΈΡΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉ Π»ΠΎΠ³ΠΎΡΠΈΠΏ Π»ΡΠ±ΠΈΠΌΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΒ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½Β ΡΡΠ°Π» ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ ΠΈΒ ΠΆΠΈΠ²ΡΠΌ. ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
See the Pen Browsers byΒ Jordano AragΓ£o (@jordanoaragao) onΒ CodePen.
ΠΠΎΠ°Π΄Π΅Ρ
ΠΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΆΠ΄Π°ΡΡ, ΠΏΠΎΠΊΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΡΒ ΡΠ΅ΡΠ²Π΅ΡΠ° Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ Π½Π°Β ΡΠ°ΠΉΡ. ΠΠΆΠΈΠ΄Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡΠ°ΡΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ.
See the Pen Pure CSS Truck Loader byΒ 0Γ5e0Γ5e (@0Γ5e0Γ5e) onΒ CodePen.
ΠΡΡΠΌΠ΅Π½
ΠΠΎΠΆΠ½ΠΎ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΡΠΏΠΎΡΠΈΡΡ, ΠΊΠ°ΠΊΠ°Ρ Π²ΡΠ΅Π»Π΅Π½Π½Π°Ρ Π»ΡΡΡΠ΅Β β Marvel ΠΈΠ»ΠΈ DC. ΠΒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠΎΠ³ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΡΡΠΌΠ΅Π½Π°.
See the Pen Batman Animation Draw. Pure CSS! byΒ Paul (@Maseone) onΒ CodePen.
Π‘ΡΡΠ°Π½ΠΈΡΠ° 404
ΠΠΎΠ³Π΄Π° Π½Π°Β ΡΠ°ΠΉΡΠ΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΎΡΠΈΠ±ΠΊΠ°, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΠΈΠ΄ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΒ Π΅ΡΒ ΠΊΠΎΠ΄ΠΎΠΌ. ΠΠ»Ρ Ρ ΠΎΡΠΎΡΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΈΠ»ΠΈΠ·ΡΡΒ Π΅Ρ. Π’Π°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ°ΡΡΡΡΠΎΠΈΡΡΡΡ ΠΈΠ·-Π·Π° Π²ΠΎΠ·Π½ΠΈΠΊΡΠ΅ΠΉ ΠΎΡΠΈΠ±ΠΊΠΈ.
See the Pen Pure CSS 404 Error Page byΒ Peiman (@pjthedj) onΒ CodePen.
ΠΠΎΡΡΠ±ΡΠΊ
ΠΡΠΎΡΡΠΎ ΠΌΠΈΠ»ΡΠΉ ΡΠ»ΡΠ±Π°ΡΡΠΈΠΉΡΡ Π½ΠΎΡΡΠ±ΡΠΊ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΠΏΠΎΡΡΠ΅Π½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΒ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π½Π°Β CSS.
See the Pen Laptop Pure CSSΒ β Day 37 #dailycssimages byΒ FireMugen (@firemugen) onΒ CodePen.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΠΊΠΎΠΌΠΎΠ³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ Π·Π°Π΄Π°Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΎΠΏΡΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π»ΡΡΡΠ΅ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ ΡΠ΅Π΄ΠΊΠΈΠ΅ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈΒ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΈΡ Β Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ². ΠΒ Π½ΠΎΠ²ΠΈΡΠΊΠΈ ΡΠΌΠΎΠ³ΡΡ ΠΈΠ·ΡΡΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ·ΡΠΊΠ° Π²Β ΠΈΠ³ΡΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΌΠ΅ ΠΈΒ ΡΠ»ΡΡΡΠΈΡΡ Π½Π°Π²ΡΠΊΠΈ.
ΠΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ ΡΒ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎΠ±Π»ΠΈΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Β ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΠΊΡΡΡΠ΅ Β«ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡΒ».
CSS animation-delay Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ°ΡΠ°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ΅ΡΠ΅Π· 2 ΡΠ΅ΠΊΡΠ½Π΄Ρ:
div {
Π·Π°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: 2 Ρ;
}
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ «ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ» Π½ΠΈΠΆΠ΅.
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ animation-delay
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π½Π°ΡΠ°Π»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ (Ρ) ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ (ΠΌΡ).
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | 0 Ρ |
---|---|
Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: | β |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅: | Π½Π΅Ρ. ΠΡΠΎΡΠΈΡΠ°ΡΡ ΠΎ animatable |
ΠΠ΅ΡΡΠΈΡ: | CSS3 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | ΠΎΠ±ΡΠ΅ΠΊΡ .style.animationDelay = «1s» ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΡΠΎ |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
Π§ΠΈΡΠ»Π°, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ»Π΅Π΄ΡΡΡ -webkit-, -moz- ΠΈΠ»ΠΈ -o-, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π»Π° Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ.
ΠΠ±ΡΠ΅ΠΊΡ | |||||
---|---|---|---|---|---|
Π·Π°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ | 43,0 4,0 -webkit- | 10,0 | 16,0 5,0 -ΠΌΠΎΠ·- | 9,0 4,0 -webkit- | 30,0 15.0 -webkit- 12,0 -o- |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
Π·Π°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: Π²ΡΠ΅ΠΌΡ | Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅;
Π‘ΡΠΎΠΈΠΌΠΎΡΡΡ Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡΠΈ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | ΠΠ³ΡΠ°ΠΉ |
---|---|---|
Π²ΡΠ΅ΠΌΡ | ΠΠ΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ. ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ΅ΠΊΡΠ½Π΄ ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄ (ΠΌΡ) ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Π΄ Π·Π°ΠΏΡΡΠΊΠΎΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — 0.ΠΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°ΡΠ½Π΅ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½Π° ΡΠΆΠ΅ Π±ΡΠ»Π° ΠΈΠ³ΡΠ°Π» Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ N ΡΠ΅ΠΊΡΠ½Π΄ / ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄. | ΠΠ³ΡΠ°ΠΉ Β» |
Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ | |
ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²ΠΎ |
ΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
ΠΡΠΈΠΌΠ΅Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.ΠΠ΄Π΅ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°ΡΠ½Π΅ΡΡΡ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½Π° ΡΠΆΠ΅ Π±ΡΠ»Π° ΠΈΠ³ΡΠ°Π΅Ρ ΡΠΆΠ΅ 2 ΡΠ΅ΠΊΡΠ½Π΄Ρ:
div {
Π·Π°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: -2 Ρ;
}
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
Π£ΡΠ΅Π±Π½ΠΈΠΊCSS: ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ CSS
Π‘ΡΡΠ»ΠΊΠ° Π½Π° HTML DOM: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animationDelay
CSS ΠΈΠΌΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
ΠΡΠΈΠΌΠ΅Ρ
Π£ΠΊΠ°ΠΆΠΈΡΠ΅ ΠΈΠΌΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ @keyframes:
div {
ΠΈΠΌΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: mymove;
}
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΈΠΌΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΠΌΡ Π΄Π»Ρ
@keyframes Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | Π½Π΅Ρ |
---|---|
Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: | β |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅: | Π½Π΅Ρ. ΠΡΠΎΡΠΈΡΠ°ΡΡ ΠΎ animatable |
ΠΠ΅ΡΡΠΈΡ: | CSS3 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | ΠΎΠ±ΡΠ΅ΠΊΡ .style.animationName = «myNEWmove» ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΡΠΎ |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
Π§ΠΈΡΠ»Π°, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ»Π΅Π΄ΡΡΡ -webkit-, -moz- ΠΈΠ»ΠΈ -o-, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π»Π° Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ.
ΠΠ±ΡΠ΅ΠΊΡ | |||||
---|---|---|---|---|---|
Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ | 43,0 4,0 -webkit- | 10,0 | 16,0 5,0 -ΠΌΠΎΠ·- | 9,0 4,0 -webkit- | 30,0 15.0 -webkit- 12,0 -o- |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
ΠΈΠΌΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: ΠΈΠΌΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° | Π½Π΅Ρ | Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅;
Π‘ΡΠΎΠΈΠΌΠΎΡΡΡ Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡΠΈ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | |
---|---|---|
ΠΈΠΌΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° | ΠΠ°Π΄Π°Π΅Ρ ΠΈΠΌΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ. | |
Π½Π΅Ρ | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ (ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΈΡΡ ΠΎΠ΄ΡΡΠ΅ΠΉ ΠΈΠ· ΠΊΠ°ΡΠΊΠ°Π΄Π°) | |
Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ | |
ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²ΠΎ |
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
Π£ΡΠ΅Π±Π½ΠΈΠΊCSS: ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ CSS
Π‘ΡΡΠ»ΠΊΠ° Π½Π° HTML DOM: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animationName
ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ — CSS: ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ CSS — ΡΡΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ ΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ°ΡΡΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, :: first-line
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΡΡΠ° ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π°Π±Π·Π°ΡΠ°.
p :: first-line {
ΡΠ²Π΅Ρ ΡΠΈΠ½ΠΈΠΉ;
ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΡΠΎΠΏΠΈΡΠ½ΡΠ΅ Π±ΡΠΊΠ²Ρ;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ
ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅Π³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ .
selector :: ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ {
ΡΡΠΎΠΈΠΌΠΎΡΡΡ ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°;
}
Π ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ.ΠΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡΠΎΡΡΡ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΎΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² Π² ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²ΠΎΠΉΠ½ΡΠ΅ Π΄Π²ΠΎΠ΅ΡΠΎΡΠΈΡ ( ::
) Π²ΠΌΠ΅ΡΡΠΎ ΠΎΠ΄ΠΈΠ½Π°ΡΠ½ΠΎΠ³ΠΎ Π΄Π²ΠΎΠ΅ΡΠΎΡΠΈΡ (:
). ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅Ρ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΎΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ Π½Π΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°Π»ΠΎ Π² Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΡ
Π²Π΅ΡΡΠΈΡΡ
ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ W3C, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΎΠ±Π° ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° Π΄Π»Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΡ
ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ CSS, Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
Π B C F Π³ΡΠ°ΠΌΠΌ-
:: grammar-error
ΠΡΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ API, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅.
-
:: marker
ΠΡΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ API, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅.
-
:: part ()
ΠΡΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ API, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅. -
:: placeholder
ΠΡΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ API, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅.
-
:: target-text
ΠΡΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ API, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅.
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ | Π‘ΡΠ°ΡΡΡ | ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ |
---|---|---|
Π£ΡΠΎΠ²Π΅Π½Ρ CSS 1 | Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ | ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. |
ΠΡΠ°ΡΠ·Π΅Ρ | Π‘Π°ΠΌΠ°Ρ Π½ΠΈΠ·ΠΊΠ°Ρ Π²Π΅ΡΡΠΈΡ | ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° |
---|---|---|
Internet Explorer | 8,0 | : ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ |
9.0 | : ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ :: ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ | |
Firefox (Gecko) | 1,0 (1,0) | : ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ |
1,0 (1,5) | : ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ :: ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ | |
Opera | 4,0 | : ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ |
7,0 | : ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ :: ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ | |
Safari (WebKit) | 1. 0 (85) | : ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ :: ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ |
Π°Π½ΠΈΠΌΠ°ΡΠΈΡ — CSS: ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² 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. ΠΡ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ Ρ ΠΎΡΠ΅Π»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎβ¦ | ΠΠ°ΠΊ Π‘ΡΠ΅ΠΉΠ½Π±Π΅ΡΠ³ | ΠΠ°ΠΏΡΡΠΊ
ΠΡΠΎΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΌΠ΅Π½Ρ ΡΠ²Π΅ΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
.element {
animation-name: changeColor;
ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: 5 Ρ;
ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ: Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ;
} @keyframes changeColor {
0% {
background-color: # 001F3F;
}
100% {
background-color: # FF4136;
}
}
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΡΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π°.ΠΠ°ΡΠ΅ΠΌΡ ΠΊΠ»Π°ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΠΈΠΌΠ΅Π½ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈΡΠ΅ΡΠ°ΡΠΈΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — ΡΡΠΎ ΡΠΎ, Π½Π° ΡΡΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΡΡΠ»Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ°Π²ΠΈΠ» ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ². ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — ΡΡΠΎ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΡ Π½Π°ΡΠ°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½ΡΠ°. ΠΡΠ΅ΡΠ°ΡΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ — ΡΡΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΏΠΎΡΠ»Π΅ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Β«Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΡΡΠΈΒ» ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ, ΠΏΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΎΡΠΊΡΡΡΠ°.
Π§ΡΠΎΠ±Ρ Π·Π°ΠΏΡΡΡΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΈ 0% (ΠΈΠ»ΠΈ Π½Π°ΡΠ°Π»Π΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ) ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΡΠ°Π²Π΅Π½ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΠΎΠΌΡ ΠΊΠΎΠ΄Ρ # 001F3F, Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈ 100% (ΠΊΠΎΠ½Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ) ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ΄ # FF4136 . Π‘Π»Π΅Π΄ΡΡ Π½Π°ΡΠΈΠΌ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΠΌ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠ»Π°ΡΡΠ°, ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠ΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄Π°ΡΡ Π²Π°ΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ ΠΎΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΊ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌΡ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΡΠΈ ΡΠ΅ΠΊΡΠ½Π΄ ΠΈ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π² Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΡΠΈΠΊΠ»Π΅.
ΠΡΠ°ΠΊ, ΡΡΠΎ Π΅ΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π΄Π΅Π»Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ?
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΉ, Π½ΠΎ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°. ΠΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ:
- animation-time-function: ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΡΠΈΠ²ΡΠ΅ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΠ΅, Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΠ΅, Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΡΡΡ ΠΈ Ρ. Π.
- animation-delay: ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ ΠΈ ΠΊΠΎΠ³Π΄Π° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
- animation-direction: ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΈΠΊΠ»Π° Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ΅. ΠΡΠΈΠΌΠ΅Ρ: ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΡ 0% Π΄ΠΎ 100%, ΠΏΠΎΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΡ 0% Π΄ΠΎ 100%, Π·Π°ΡΠ΅ΠΌ ΠΎΡ 100% Π΄ΠΎ 0% Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΈ.
- animation-fill-mode: ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎ / ΠΏΠΎΡΠ»Π΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΠΎΡΡΠ°Π²Π°Π»Π°ΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅, Π° Π½Π΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π»Π°ΡΡ Π² Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
- animation-play-state: ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΈΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡΡ.
Florin Pop — CSS Animation
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ : Π― ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π» Π²ΠΈΠ΄Π΅ΠΎ Π½Π° YouTube Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠΎΠΊΠ°.ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½ΠΈΠΆΠ΅!
ΠΠ° ΠΏΡΠΎΡΠ»ΠΎΠΉ Π½Π΅Π΄Π΅Π»Π΅ Ρ ΠΈΠ³ΡΠ°Π» Ρ ΡΡΠΎΠΉ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ ΠΏΠΎΠ΄ΡΠΌΠ°Π», ΡΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΡΡΠ°ΡΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΅Π΅ ΡΠΎΠ·Π΄Π°ΡΡ.
ΠΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠΎΠ·Π΄Π°Π» Π½Π° Codepen (ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Ρ ΠΎΡΠ΄Π°Π΅ΡΠ΅ Π΅ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎΠ΅ ΡΠ°ΠΌ):
ΠΠ΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ? π€ Π§ΡΠΎ ΠΆ … Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΡΠΎ-ΡΠΎ Π½Π° ΡΠ°ΠΉΡΠ΅. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ.(ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΠΎ Π½Π° Π»Π΅Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅ ΠΈΠ»ΠΈ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅).
HTML
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° HTML ΠΏΡΠΎΡΡΠ°, Π²ΡΠ΅Π³ΠΎ div
:
ΠΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ div
Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .blob
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³Π° Π² CSS.
CSS
ΠΠ°ΡΠ½Π΅ΠΌ ΡΠ½Π°ΡΠ°Π»Π° Ρ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ CSS:
.blob {
ΡΠΎΠ½: ΡΠ΅ΡΠ½ΡΠΉ;
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 50%;
ΠΌΠ°ΡΠΆΠ°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΏΡΡΠ½ΠΎ (ΠΈΠ»ΠΈ ΠΊΡΡΠΆΠΎΠΊ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅).Π ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄Π»Ρ Π·Π°Π±Π°Π²Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ :
.blob {
ΡΠΎΠ½: ΡΠ΅ΡΠ½ΡΠΉ;
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 50%;
ΠΌΠ°ΡΠΆΠ°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ΅Π½Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: 0 0 0 0 rgba (0, 0, 0, 1);
ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ: ΠΌΠ°ΡΡΡΠ°Π± (1);
Π°Π½ΠΈΠΌΠ°ΡΠΈΡ: ΠΏΡΠ»ΡΡ 2 Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ;
}
@keyframes pulse {
0% {
ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ: ΠΌΠ°ΡΡΡΠ°Π± (0,95);
ΡΠ΅Π½Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: 0 0 0 0 rgba (0, 0, 0, 0,7);
}
70% {
ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ: ΠΌΠ°ΡΡΡΠ°Π± (1);
box-shadow: 0 0 0 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ rgba (0, 0, 0, 0);
}
100% {
ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ: ΠΌΠ°ΡΡΡΠ°Π± (0,95);
ΡΠ΅Π½Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: 0 0 0 0 rgba (0, 0, 0, 0);
}
}
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΠΌΡ ΠΎΠ±ΡΡΠ²ΠΈΠ»ΠΈ @keyframes
Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ pulse
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ 3 ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°: 0%, 70%, 100%
.
ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Ρ Π½Π°Ρ Π΅ΡΡΡ box-shadow
Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ 1
(Π°ΡΡΠΈΠ±ΡΡ 4th
Π½Π° rgba
), Π½ΠΎ ΡΠΆΠ΅ Π½Π° ΠΎΡΠΌΠ΅ΡΠΊΠ΅ 70%
ΠΌΡ Π΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ — 0
. Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ spread
Π½Π° box-shadow
ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ 10px
, Π° Π·Π°ΡΠ΅ΠΌ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ 0
Π½Π° ΠΎΡΠΌΠ΅ΡΠΊΠ΅ 100%
. Π£Π·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ box-shadow.
Π’Π°ΠΊΠΆΠ΅ ΠΌΡ ΠΏΠΎΠΈΠ³ΡΠ°Π΅ΠΌ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ scale
, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ Π·Π°ΡΡΠ°Π²ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡ blob
ΠΌΡΠ³ΠΊΠΎ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ ΠΈ ΡΠ°ΡΡΠΈ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ.
Π ΠΊΠΎΠ½ΡΠ΅ ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ
ΠΊ ΠΊΠ»Π°ΡΡΡ . blob
ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π΅Π΅ Π·Π°ΠΏΡΡΠΊ ΠΊΠ°ΠΆΠ΄ΡΠ΅ 2 ΡΠ΅ΠΊΡΠ½Π΄Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ
ΡΠ°Π·.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΠΎΡΡΠΎΠΉ, Π½ΠΎ ΠΌΠΎΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²Π°ΡΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡ.
ΠΠ°Π΄Π΅ΡΡΡ, Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡ! Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ ΠΌΠ½Π΅, Π³Π΄Π΅ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ!
Π£Π΄Π°ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ! π
32 Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΎΠΏΠΈΡ
ΠΡΠΎΡΡΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π²ΠΎΠ΄Ρ.Π€ΡΠ°Π³ΠΌΠ΅Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ animate.css. ΠΠ°ΡΠ΅ΠΌ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π²ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ?
Π ΠΊΠΎΠ΄Π΅
vov.css
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° CSS Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ , Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ— SCSS / CSS3
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS. ΠΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π² ΠΏΡΠΎΠ΅ΠΊΡ ΡΠ°ΠΉΠ»Ρ CSS ΠΈΠ»ΠΈ SCSS. ΠΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΠΊΠ»Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Woah.css
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠΊΡΡΠ΅Π½ΡΡΠΈΡΠ½ΡΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
ΠΠΈΠΊΡΠΎΠ½.JS
Micron.JS — ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ DOM. Micron.JS Π°Π½ΠΈΠΌΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS, Π° ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅ΡΡΡ JavaScript. Micron.JS Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΆΠΈΠ²ΠΈΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² Π΄Π°Π½Π½ΡΡ HTML5 ΠΈΠ»ΠΈ ΡΠ΅ΠΏΠΎΡΠΊΠΈ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² JavaScript.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Animista
Animista — ΡΡΠΎ ΠΌΠ΅ΡΡΠΎ, Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠ΅ΠΉ Π³ΠΎΡΠΎΠ²ΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΈΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Mimic.css
Mimic.css — ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
cssanimation.io
Π ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²Π΅Π±-ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ cssanimation.io — ΡΡΠΎ Π»ΡΡΡΠ°Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ CSS ΠΈ GreenSock. ΠΠ²ΠΈΠ³Π°ΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ Ρ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠΌΠ΅ΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ HTML ΠΈ CSS3.
ΠΠ²ΡΠΎΡ
- Π°ΡΠ°Π½ ΠΌΠΎΡ Π°ΠΌΠ΅Π΄ Π°ΠΌΠΈΠ½
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Hexa
ΠΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS.ΠΠΆΠΈΠ²ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠ΅ΠΊΡΡ, ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΈ Π²ΡΠ΅, ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ, ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ»ΠΎΠΆΠΈΠ² ΠΌΠ°Π³ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΠ»Π°ΡΡ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Vivify
Vivify — ΡΡΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
‘ΡΠ°Ρ ΠΈΠΎΠ½Ρ-ΠΎΠ΄ΡΡΠ΅Π²Π»Π΅Π½Π½ΡΠ΅’
ΠΠ΄Π½ΠΎΡΠ΅Π»Π΅Π²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΠΏΠΎΠΌΠΎΡΠΈ Π² ΠΎΡΠΊΠ΅ΡΡΡΠΎΠ²ΠΊΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Obnoxious.CSS
Obnoxious CSS — ΡΡΠΎ Π½Π°Π±ΠΎΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠΈΠ»ΡΠ½ΡΡ ΡΠ΅ΡΠ΄ΡΠ΅ΠΌ, Π½ΠΎ ΡΠ»Π°Π±ΡΡ Π΄ΡΡ ΠΎΠΌ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅
ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π½Π°Π±ΠΎΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ²ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Repaintless.css — ΠΡΡΡΡΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
Repaintless.css Π² ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠΎΡΡΠΎΡΡΠ΅ΠΉ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ· Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π½Π΅ Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΊΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Dynamic.css
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ.css — ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΊΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅. ΠΠ½ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²Ρ ΠΎΠ΄ΡΡΠΈΡ ΠΈ ΠΈΡΡ ΠΎΠ΄ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π΄Π»Ρ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΎΠ², ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²: hover ΠΈ Π²ΡΠ΅Ρ Π²ΠΈΠ΄ΠΎΠ² ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ²ΡΠΎΡ
- ΠΡΠΈΡΡΠΎΡΡΠ΅Ρ ΠΠ½Π΄ΡΠ΅Π°ΡΠ΅Π½
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Π·Π»ΠΎΠΉ CSS
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS3. ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΡΠΊΠΈΠ΅, ΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
ΠΠ²ΠΈΠΆΠ΅Π½ΠΈΠ΅ UI
ΠΠΎΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Sass Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Π²ΡΠΎΡΠ½ΠΈΠΊ
ΠΡΠΈΡΡΠ΄Π»ΠΈΠ²Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
VHS
CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΡΡ-Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Motion CSS
Motion CSS — ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ Π²Π°ΡΠΈΡ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².Π Π°Π±ΠΎΡΠ°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ» css ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Bounce.js
Bounce.js — ΡΡΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS3. ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π½Π° bouncejs.com ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ JavaScript, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π»ΠΎ ΠΈΡ Π½Π° Π»Π΅ΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Bounce.js Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
AniJS
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±Π΅Π· ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠΊΠΎΠ»ΠΎ 9,0 ΠΠ ΠΏΠΎΡΠ»Π΅ ΡΠΆΠ°ΡΠΈΡ. ΠΠ΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π² ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°Ρ .
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
CSShake
CSS-ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ DOM!
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
DynCSS
ΠΡΠΎΡΡΡΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS Π΄Π»Ρ ΠΎΠΆΠΈΠ²Π»Π΅Π½ΠΈΡ Π²Π°ΡΠΈΡ ΡΠ°ΠΉΡΠΎΠ².
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
ΠΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS3
ΠΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ — ΡΡΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ CSS3, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΡΠΏΠΎΡΠΎΠΌ Π½Π° 3D-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈ ΠΊΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΡ.ΠΠ΅Π΄Π°Π²Π½ΠΎ Π²ΡΡΠ»ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π²ΡΠ΅ΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π² ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ»ΠΈ Π²ΡΡΠ°Π²Π»Π΅Π½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΡΡΡΠΎΡΠΊΠ°ΠΌΠΈ CSS3 / Stylus.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Animate.css
ΠΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π’Π°ΠΊ ΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈ Π»Π΅Π³ΠΊΡΡ Π²Π΅ΡΡ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅
Π₯ΠΎΠ²Π΅Ρ
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ CSS3-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΡ ΠΊ ΡΡΡΠ»ΠΊΠ°ΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°ΠΌ, SVG, ΠΈΠ·Π±ΡΠ°Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΈ Ρ.