transitions/animations

Mere som dette

Food Emulsifier

af Nurul Aqila

MAT.126 1.4-1.5

af David Kedrowski

Chemistry mindmap

af Iván Alexis Alvarado Justo

Introduction to functions.

af Mya Morgan - Sandalwood Heights SS (2442)

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;