transitions/animations
(Korniycuk Anton)
transform
transform-functions
matrix(n,n,n,n,n,n) (0.586,0.8,-0.8,0.586,40,40) // a 2D transformation, using a matrix of six values
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) // a 3D transformation, using a 4x4 matrix of 16 values
translate(x,y) (20px,10px) // a 2D translation
translate3d(x,y,z) // a 3D translation
translateX(x) // a translation, using only the value for the X-axis
translateY(y) // a translation, using only the value for the Y-axis
translateZ(z) // a 3D translation, using only the value for the Z-axis
scale(x,y) (0.5,2) // a 2D scale transformation
scale3d(x,y,z) // a 3D scale transformation
scaleX(x) // a scale transformation by giving a value for the X-axis
scaleY(y) // a scale transformation by giving a value for the Y-axis
scaleZ(z) // a 3D scale transformation by giving a value for the Z-axis
rotate(angle) (45deg) // a 2D rotation, the angle is specified in the parameter
rotate3d(x,y,z,angle) (1,2,3,30deg) => 30deg,60deg,90deg // a 3D rotation
rotateX(angle) // a 3D rotation along the X-axis
rotateY(angle) // a 3D rotation along the Y-axis
rotateZ(angle) // a 3D rotation along the Z-axis
skew(x-angle,y-angle) // a 2D skew transformation along the X- and the Y-axis, transforms content
skewX(angle) // a 2D skew transformation along the X-axis
skewY(angle) // a 2D skew transformation along the Y-axis
perspective(n) // a perspective view for a 3D transformed element
will-change: auto*| prop [, prop]? // allow to enable hardware resources for some of CSS properties
// https://dev.opera.com/articles/ru/css-will-change-property/
backface-visibility: visible*|hidden;
perspective: 200px; // only for parent
transform-style: flat|preserve-3d; // enables or disables 3D
- flat* // Specifies that child elements will NOT preserve its 3D position. This is default
- preserve-3d // Specifies that child elements will preserve its 3D position
transform-origin: x-axis y-axis z-axis|initial|inherit;
example:
transform-origin: left top;
z-asis values:
- length(px,...)
x-axis, y-axis values:
- left
- center
- right
- length(px,...)
- %
transform: none|transform-functions;
transition
multi
transition: width 2s, height: 1s;
transition-property: width, height;
transition-duration: 2s, 1s;
timing-functions
- ease // specifies a transition effect with a slow start, then fast, then end slowly (this is default)
- linear // specifies a transition effect with the same speed from start to end
- ease-in // specifies a transition effect with a slow start
- ease-out // specifies a transition effect with a slow end
- ease-in-out // specifies a transition effect with a slow start and end
- cubic-bezier(n,n,n,n) // lets you define your own values in a cubic-bezier function
base
transition: all .2s ease-in-out 1s;
transition-property: all;
transition-duration: .2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
