Successfully reported this slideshow.
Animation, Transition and   Transform in CSS3
Contents of Transforms• CSS3 Transforms  – Transform rendering model  – 3D Transform Rendering model  – Properties, Functi...
Transforms?• With transform, we can  – Move  – Scale  – Turn  – Spin  – Stretch
Transform rendering model• Elements establish their local coordinate  system within the coordinate system of their  parent.
<div style=“transform: translate(80px, 80px)">  <div style=“transform: scale(1.5, 1.5)">     <div style=“transform: rotate...
<div style=“transform: translate(80px, 80px)">  <div style=“transform: scale(1.5, 1.5)">     <div style=“transform: rotate...
.t {   height: 100px; width: 100px;   transform: translate(80px, 80px) rotate(45deg);   background-color: yellow;   opacit...
.t {   height: 100px; width: 100px;   transform: translate(80px, 80px) rotate(45deg);   background-color: yellow;   opacit...
• http://www.w3.org/TR/CSS2/visudet.html• CSS2 Visual formatting model   – Effects are applied after elements have been si...
<div style=width: 200px; height: 200px;overflow: auto><div class=t>  <div class=t>    <div class=t></div>  </div></div></d...
• Fixed backgrounds are affected by any transform  specified for the root element, and not by any  other transforms.• If t...
3D Transform RenderingThe scaling is proportional to d/(d − Z) where d, thevalue of ‘perspective’, is the distance from th...
div {   height: 150px;   width: 150px;}.container {border: 1px solid black;}.transformed {   background-color: blue;   -we...
div {   height: 150px;   width: 150px;}.container {border: 1px solid black;}.transformed {   background-color: blue;   -we...
div {   height: 150px;   width: 150px;}.container {   -webkit-perspective: 500px;   border: 1px solid black;}.transformed ...
div {   height: 150px;   width: 150px;}.container {   -webkit-perspective: 500px;   border: 1px solid black;}.transformed ...
.container {   -webkit-perspective: 500px;   border: 1px solid black;}.transformed {   -webkit-transform: rotateY(50deg); ...
• The lime element is being rendered into the  plane of its parent because it is not a member  of a 3D rendering context; ...
.container {   -webkit-perspective: 500px;   border: 1px solid black;}.transformed {   -webkit-transform-style: preserve-3...
.container {   -webkit-perspective: 500px;   border: 1px solid black;}.transformed {   -webkit-transform-style: preserve-3...
• The blue element now establishes a 3D  rendering context, of which the lime element  is a member. Now both blue and lime...
.container {  background-color: rgba(0, 0, 0, 0.3);  transform-style: preserve-3d;  perspective: 500px;                   ...
Properties, Functions• ‘transform’ property  – This property contains a list of transform    functions.• ‘transform-origin...
• ‘transform-style’ property    – flat|preserve-3d• ‘perspective’ property    – http://www.w3schools.com/cssref/trycss3_pe...
• transform function  – matrix, matrix3d  – translate|X|Y|Z|3d  – scale|X|Y|Z|3d  – rotate|X|Y|Z|3d  – skew|X|Y  – perspec...
And many other things in transforms•   SVG transform•   Matrix Decomposition for Animation•   Unmatrix•   Recomposing the ...
Transition Contents• CSS3 Transitions  – Transitions  – Properties and Funtions  – Events
Transitions• Animate smoothly from the old state to the  new state over time.• Must specify two things  – Specify the CSS ...
Properties and Functions• Properties  – transition ( shorthand property)  – transition-property (Specifies the name of the...
• ‘transition-timing-function’ details   – stepping function        • A stepping function is defined by a number that divi...
• Functions   –   linear = the same speed from start to end   –   ease = a slow start, then fast, then end slowly   –   ea...
Transition Events• transitionend  – Event occurs at the completion of the transition
Animations Contents• CSS3 Animations  – Animations  – Keyframes  – Properties  – Events
Animations• Animations are similar to transitions in that  they change the presentational value of CSS  properties over ti...
keyframes• Keyframes are used to specify the values for  the animating properties at various points  during the animation....
• Timing functions for keyframes@keyframes bounce {   from {     top: 100px; animation-timing-function: ease-out;   }   50...
Properties• animation : A shorthand property, except the animation-play-state  property• animation-name : name of the @key...
Events• animationstart• animationend• animationiteration
Let’s make!
Spinner
• Draw a bar..loading.bar div{   width: 10px;   height: 30px;   background: black;   position: absolute;   top: 35px;   le...
• positioning..loading.bar div:nth-child(1){   -webkit-transform: rotate(0deg) translate(0, -30px);   -webkit-animation-de...
• iteration.@-webkit-keyframes fadeit{  0%{    opacity:1;  }  100%{    opacity:0;  }}
• http://jsfiddle.net/freestrings/mLu22/
• When the computed value of an animatable  property changes, implementations must  decide what transitions to start
• ul   – perspective: 600px;   – perspective-origin: 0% 50%;• li   – transition: all 600ms ease, opacity 200ms ease;   – t...
• Real sample  – http://lab.hakim.se/scroll-effects/• Conceptual implementation  – http://jsfiddle.net/freestrings/hdbUv/
CSS3 TTA (Transform Transition Animation)
Upcoming SlideShare
Loading in …5
×

CSS3 TTA (Transform Transition Animation)

1,070 views

Published on

  • Be the first to like this

CSS3 TTA (Transform Transition Animation)

  1. 1. Animation, Transition and Transform in CSS3
  2. 2. Contents of Transforms• CSS3 Transforms – Transform rendering model – 3D Transform Rendering model – Properties, Functions
  3. 3. Transforms?• With transform, we can – Move – Scale – Turn – Spin – Stretch
  4. 4. Transform rendering model• Elements establish their local coordinate system within the coordinate system of their parent.
  5. 5. <div style=“transform: translate(80px, 80px)"> <div style=“transform: scale(1.5, 1.5)"> <div style=“transform: rotate(45deg)"></div> </div></div>
  6. 6. <div style=“transform: translate(80px, 80px)"> <div style=“transform: scale(1.5, 1.5)"> <div style=“transform: rotate(45deg)"></div> </div></div>
  7. 7. .t { height: 100px; width: 100px; transform: translate(80px, 80px) rotate(45deg); background-color: yellow; opacity: 0.5}<div class=t> <div class=t> <div class=t></div> </div></div>
  8. 8. .t { height: 100px; width: 100px; transform: translate(80px, 80px) rotate(45deg); background-color: yellow; opacity: 0.5}<div class=t> <div class=t> <div class=t></div> </div></div>
  9. 9. • http://www.w3.org/TR/CSS2/visudet.html• CSS2 Visual formatting model – Effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]• Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context(z-index). – Box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block
  10. 10. <div style=width: 200px; height: 200px;overflow: auto><div class=t> <div class=t> <div class=t></div> </div></div></div>
  11. 11. • Fixed backgrounds are affected by any transform specified for the root element, and not by any other transforms.• If the root elements background were repeating dots, and a transformation of ‘scale(0.5)’ were specified on the root element, the dots would shrink to half their size, but there will be twice as many, so they still cover the whole viewport. ( Did not operate(implemented)? Is wrong example code?)• http://jsfiddle.net/freestrings/WQs9P/
  12. 12. 3D Transform RenderingThe scaling is proportional to d/(d − Z) where d, thevalue of ‘perspective’, is the distance from the drawingplane to the the assumed position of the viewers eye.
  13. 13. div { height: 150px; width: 150px;}.container {border: 1px solid black;}.transformed { background-color: blue; -webkit-transform: rotateY(50deg);}<div class="container"> <div class="transformed"></div></div>
  14. 14. div { height: 150px; width: 150px;}.container {border: 1px solid black;}.transformed { background-color: blue; -webkit-transform: rotateY(50deg);}<div class="container"> <div class="transformed"></div></div>
  15. 15. div { height: 150px; width: 150px;}.container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { background-color: blue; -webkit-transform: rotateY(50deg);}<div class="container"> <div class="transformed"></div></div>
  16. 16. div { height: 150px; width: 150px;}.container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { background-color: blue; -webkit-transform: rotateY(50deg);}<div class="container"> <div class="transformed"></div></div>
  17. 17. .container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { -webkit-transform: rotateY(50deg); background-color: blue;}.child { -webkit-transform-origin: top left; -webkit-transform: rotateX(40deg); background-color: lime;}<div class="container"> <div class="transformed"> <div class="child"></div> </div></div>
  18. 18. • The lime element is being rendered into the plane of its parent because it is not a member of a 3D rendering context; the parent is "flattening"
  19. 19. .container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(50deg); background-color: blue;}.child { -webkit-transform-origin: top left; -webkit-transform: rotateX(40deg); background-color: lime;}<div class="container"> <div class="transformed"> <div class="child"></div> </div></div>
  20. 20. .container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(50deg); background-color: blue;}.child { -webkit-transform-origin: top left; -webkit-transform: rotateX(40deg); background-color: lime;}<div class="container"> <div class="transformed"> <div class="child"></div> </div></div>
  21. 21. • The blue element now establishes a 3D rendering context, of which the lime element is a member. Now both blue and lime elements share a common three-dimensional space, so the lime element renders as tilting out from its parent, influenced by the perspective on the container.
  22. 22. .container { background-color: rgba(0, 0, 0, 0.3); transform-style: preserve-3d; perspective: 500px; In safari}.container > div { position: absolute; left: 0;}.container > :first-child { transform: rotateY(45deg); background-color: orange; top: 10px; height: 135px;} In chrome.container > :last-child { transform: translateZ(40px); background-color: rgba(0, 0, 255, 0.75); top: 50px; height: 100px;}
  23. 23. Properties, Functions• ‘transform’ property – This property contains a list of transform functions.• ‘transform-origin’ property – This property must be used together with the ‘transform’ property. – http://www.w3schools.com/cssref/css3_pr_transf orm-origin.asp
  24. 24. • ‘transform-style’ property – flat|preserve-3d• ‘perspective’ property – http://www.w3schools.com/cssref/trycss3_perspective_inuse.htm• ‘perspective-origin’ property – The resolved value of ‘perspective-origin’ is the used value (i.e., percentages are resolved to absolute lengths). – https://developer.mozilla.org/en/CSS/perspective-origin (firefox)• ‘backface-visibility’ property – Determines whether or not the "back" side of a transformed element is visible when facing the viewer. – visible | hidden
  25. 25. • transform function – matrix, matrix3d – translate|X|Y|Z|3d – scale|X|Y|Z|3d – rotate|X|Y|Z|3d – skew|X|Y – perspective
  26. 26. And many other things in transforms• SVG transform• Matrix Decomposition for Animation• Unmatrix• Recomposing the matrix• Mathematical Description of Transform Functions
  27. 27. Transition Contents• CSS3 Transitions – Transitions – Properties and Funtions – Events
  28. 28. Transitions• Animate smoothly from the old state to the new state over time.• Must specify two things – Specify the CSS property you want to add an effect to – Specify the duration of the effect
  29. 29. Properties and Functions• Properties – transition ( shorthand property) – transition-property (Specifies the name of the CSS property to which the transition is applied) – transition-duration (Defines the length of time that a transition takes. Default 0) – transition-timing-function (Describes how the speed during a transition will be calculated. Default "ease”) – transition-delay (Defines when the transition will start. Default 0)
  30. 30. • ‘transition-timing-function’ details – stepping function • A stepping function is defined by a number that divides the domain of operation into equally sized intervals – cubic Bézier curve • http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_ curves• Functions – ease = cubic-bezier(0.25, 0.1, 0.25, 1.0). – linear = cubic-bezier(0.0, 0.0, 1.0, 1.0). – ease-in = cubic-bezier(0.42, 0, 1.0, 1.0). – ease-out = cubic-bezier(0, 0, 0.58, 1.0). – ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0) – cubic-bezier(n, n, n, n)
  31. 31. • Functions – linear = the same speed from start to end – ease = a slow start, then fast, then end slowly – ease-in = a slow start. – ease-out = a slow end. – ease-in-out = a slow start and end
  32. 32. Transition Events• transitionend – Event occurs at the completion of the transition
  33. 33. Animations Contents• CSS3 Animations – Animations – Keyframes – Properties – Events
  34. 34. Animations• Animations are similar to transitions in that they change the presentational value of CSS properties over time.• The principal difference is that while transitions trigger implicitly when property values change, animations are explicitly executed when the animation properties are applied. ( Because animation require a name of keyframe.)
  35. 35. keyframes• Keyframes are used to specify the values for the animating properties at various points during the animation.• The keyframes specify the behavior of one cycle of the animation.• Use a ‘CSS at-rule’, @keyframes
  36. 36. • Timing functions for keyframes@keyframes bounce { from { top: 100px; animation-timing-function: ease-out; } 50% { top: 100px; animation-timing-function: ease-in; } to { top: 100px; } }
  37. 37. Properties• animation : A shorthand property, except the animation-play-state property• animation-name : name of the @keyframes animation• animation-duration• animation-timing-function : See transition functions• animation-delay• animation-iteration-count : The number of times an animation is played.• animation-direction : Specifies whether or not the animation should play in reverse on alternate cycles.• animation-play-state : Whether the animation is running or paused.• http://www.w3schools.com/css3/css3_animations.asp
  38. 38. Events• animationstart• animationend• animationiteration
  39. 39. Let’s make!
  40. 40. Spinner
  41. 41. • Draw a bar..loading.bar div{ width: 10px; height: 30px; background: black; position: absolute; top: 35px; left: 45px; opacity:0.05; -webkit-animation: fadeit 1.1s linear infinite;}
  42. 42. • positioning..loading.bar div:nth-child(1){ -webkit-transform: rotate(0deg) translate(0, -30px); -webkit-animation-delay:0.39s;}….loading.bar div:nth-child(8){ -webkit-transform: rotate(315deg) translate(0, -30px); -webkit-animation-delay:1.3s;}
  43. 43. • iteration.@-webkit-keyframes fadeit{ 0%{ opacity:1; } 100%{ opacity:0; }}
  44. 44. • http://jsfiddle.net/freestrings/mLu22/
  45. 45. • When the computed value of an animatable property changes, implementations must decide what transitions to start
  46. 46. • ul – perspective: 600px; – perspective-origin: 0% 50%;• li – transition: all 600ms ease, opacity 200ms ease; – transform-origin: 0% 0%;• .future or .past – transform: rotateY(90deg); – opacity : 0;
  47. 47. • Real sample – http://lab.hakim.se/scroll-effects/• Conceptual implementation – http://jsfiddle.net/freestrings/hdbUv/

×