2D Conversion:
Displacement :
-webkit-transform:translate ();
Zoom :
-webkit-transform:scale (. pixels,. pixels);
Rotation :
-webkit-transform:rotate (45DEG);
-webkit-transform-origin:x px,y px;
Oblique cut :
-webkit-transform:skew (Xrad,yrad);
Transition
-webkit-transition:width (for transition properties) 4s (transition period and time) ease (transition effect type) 2s (delay)
Over type:
- : Linear linear transition
- : Ease Smooth transition
- : Ease-in from slow to fast transition
- : Ease-out from fast to slow transition
- : Ease-in-out from slow to fast to slow
Animation: Animation
@-webkit-keyframes
@-moz-keyframes
@-ms-keyframes
@-o-keyframes
@-webkit-keyframes Myfirst {
0% {
width:150px;
}
30% {
width:300px;
}
50% {
width:500px;
}
100% {
width:600px;
}
}
. div1 {
width:150px;
height:150px;
Background-color: #21bbca;
-moz-animation:myfirst 4s ease infinite (infinite loop);
}
Css2d rotation, transitions, animations