. CSS- .
, . CSS- . .
, , . - , .
() :
, 2D, 3D-.
, CSS- .
- , - . CSS HTML- .
hover.
transform translate , CSS- left top. skew - .
, skew , CSS- skew . , « » - .
CSS . , .
, , : , . .
CSS :
transform-origin , . , , CSS-.
rotate - rotateX rotateY - «X» «Y» .
. , . CSS - .
animation
CSS animation @keyframes , .
- . , - , - . . :
animation @keyframes. . .
animation
animation . :
- animation-name - ;
- animation-duration - ( "s", "ms");
- animation-timing-function - (ease, linear, ease-out, ease-in, ease-in-out, cubic-bezier);
- animation-iteration-count - infinite;
- animation-direction - (normal, reverse, alternate, alternate-reverse );
- animation-play-state - (running, paused);
- animation-delay - ( "s", "ms");
- animation-fill-mode - (
- none, forwards, backwards, both);
animation @keyframes, .
, . @keyframes, , - .
( / ) linear. - ease-out, - ease-in. ease - , ease-in-out - .
cubic-bezier .
. «GO!» .
@keyframes «» (. ), . , .
0 % 100 % , . from to, 0 % 100 %. , / . .
: 0 %, 25 %, 50 %, 75 % 100 %. : 0 %, 50 % 100 %. , .
When constructing any type of transformation, one essential rule should be observed. Using JavaScript is not always acceptable, especially when it comes to programmatically changing the properties of elements, for example, changing the value of the background-image property.
HTML, CSS, and JavaScript work well together, but in all cases you need to consider the actual functionality of each component. Ideally, when they work in a clear combination and do not interfere with each other.