CSS3 Transforms Transitions and Animations

3,373 views
3,174 views

Published on

How, why and when should we use CSS3's fantastic new tools?

Published in: Design, Technology, Education
1 Comment
4 Likes
Statistics
Notes
  • I have been working as webdesigner since10 years, I did not know the up to date css3 trandards, and it's de redicovery for me
    Thank you so much
    Regards and kiss
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,373
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
82
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

CSS3 Transforms Transitions and Animations

  1. 1. CSS3 Transforms,Transitions & Animations @yaili
  2. 2. 2D Transforms
  3. 3. “CSS 2D Transforms allows elements rendered byCSS to be transformed in two-dimensional space.”—W3C, http://www.w3.org/TR/css3-2d-transforms/
  4. 4. #flower  {   background:  url(flower-­‐1.png);   width:  300px;   height:  300px;  }#flower:hover  {   transform:  translateX(600px);  }
  5. 5. translate,  translateX,  translateYscale,  scaleX,  scaleYrotateskew,  skewX,  skewYmatrix
  6. 6. #flower:hover  {   transform:  translate(600px,  -­‐50px)  scale(1.5)  ➥rotate(15deg)  skew(15deg);  }
  7. 7. #flower:hover  {     transform:  translate(600px,  -­‐50px)  scale(1.5)  ➥  rotate(15deg)  skew(15deg);   transform-­‐origin:  0  0;  }
  8. 8. 3D Transforms
  9. 9. scale  →  scale3dscaleXscaleYscaleZ
  10. 10. translate  →  translate3drotate  →  rotate3dmatrix  →  matrix3d
  11. 11. perspective-­‐origin
  12. 12. backface-­‐visibility
  13. 13. body  {   perspective:  1000;   perspective-­‐origin:  50%  100%;  }#kitten  {   margin:  auto;   display:  block;  }#kitten:hover  {     transform:  rotateY(-­‐25deg);  }
  14. 14. #level1  {   background:  url(kitten.jpg)  no-­‐repeat;   width:  500px;   height:  333px;   transform:  rotateY(-­‐25deg);     transform-­‐style:  preserve-­‐3d;  }
  15. 15. #level2  {   border:  5px  solid  red;   width:  200px;   height:  200px;   transform:  translateZ(50px);  }#level3  {   background:  pink;   width:  150px;   height:  150px;   top:  -­‐20px;   position:  relative;   transform:  translateZ(40px);  }
  16. 16. Transitions
  17. 17. #flower  {   background:  url(flower-­‐1.png);   width:  300px;   height:  300px;  }#flower:hover  {   transform:  translateX(600px);  }
  18. 18. #flower  {   background:  url(flower-­‐1.png);   width:  300px;   height:  300px;   transition-­‐property:  transform;     transition-­‐duration:  1.5s;   transition-­‐delay:  .1s;     transition-­‐timing-­‐function:  ease-­‐in;  }#flower:hover  {     transform:  translateX(600px);  }
  19. 19. #flower  {   background:  url(flower-­‐1.png);   width:  300px;   height:  300px;     transition:  all  1.5s  ease-­‐in  .1s;  }
  20. 20. Animations
  21. 21. “CSS Animations allow an author to modifyCSS property values over time.”—W3C, http://www.w3.org/TR/css3-animations/
  22. 22. @keyframes  sky  {   0%  {  background-­‐color:  #daf2f4;  }   50%  {  background-­‐color:  #f7d518;  }   100%  {  background-­‐color:  #f5700d;  }}
  23. 23. #box  {   animation-­‐name:  sky;   animation-­‐duration:  5s;   animation-­‐timing-­‐function:  linear;   animation-­‐iteration-­‐count:  infinite;   animation-­‐direction:  alternate;  }
  24. 24. #box  {   animation:  sky  10s  linear  infinite  alternate;  }
  25. 25. @keyframes  spin  {   0%  {     transform:  rotate(0deg);  }   100%  {     transform:  rotate(180deg);  }}
  26. 26. #flower-­‐1,#flower-­‐2,#flower-­‐3  {   animation:  spin  .7s  linear  infinite;  }
  27. 27. Vendor Prefixes
  28. 28. #flower:hover  {     transform:  translateX(600px);  }
  29. 29. #flower:hover  {   -­‐moz-­‐transform:  translateX(600px);   -­‐ms-­‐transform:  translateX(600px);   -­‐o-­‐transform:  translateX(600px);   -­‐webkit-­‐transform:  translateX(600px);   transform:  translateX(600px);  }
  30. 30. “Comparison of layout engines”http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
  31. 31. “When can I use…” http://caniuse.com/
  32. 32. Dynamic CSS
  33. 33. LESS & Sass
  34. 34. .borders  {   border:  1px  solid  black;   border-­‐radius:  4px;  } .box  { =   background:  red;   border:  1px  solid  black;.box  {   border-­‐radius:  4px;  }   background:  red;   .borders;  }
  35. 35. .translateX  (@valueX:"")  {   -­‐moz-­‐transform:  translateX(@valueX);   -­‐ms-­‐transform:  translateX(@valueX);   -­‐o-­‐transform:  translateX(@valueX);   -­‐webkit-­‐transform:  translateX(@valueX);   transform:  translateX(@valueX);  }#flower:hover  {     .translateX(600px);  }
  36. 36. .transition  (@property:"",  @duration:"",  @delay:"",  @timing:"")  {   -­‐moz-­‐transition-­‐property:  @property;   -­‐o-­‐transition-­‐property:  @property;   -­‐webkit-­‐transition-­‐property:  @property;   transition-­‐property:  @property;     -­‐moz-­‐transition-­‐duration:  @duration;   -­‐o-­‐transition-­‐duration:  @duration;   -­‐webkit-­‐transition-­‐duration:  @duration;   transition-­‐duration:  @duration;     -­‐moz-­‐transition-­‐delay:  @delay;   -­‐o-­‐transition-­‐delay:  @delay;   -­‐webkit-­‐transition-­‐delay:  @delay;   transition-­‐delay:  @delay;     -­‐moz-­‐transition-­‐timing-­‐function:  @timing;   -­‐o-­‐transition-­‐timing-­‐function:  @timing;   -­‐webkit-­‐transition-­‐timing-­‐function:  @timing;   transition-­‐timing-­‐function:  @timing;  }
  37. 37. #flower  {   .transition(transform,  1.5s,  .1s,  ease-­‐in);  }
  38. 38. “Pro CSS for HighTraffic Websites”by Antony Kennedy& Inayaili de Leónprocssforhightrafficwebsites.com
  39. 39. Resources
  40. 40. “CSS3 for Web Designers”, by Dan Cederholm http://www.abookapart.com/products/css3-for-web-designers
  41. 41. “Hardboiled Web Design”, by Andy Clarke http://fivesimplesteps.com/books/hardboiled-web-design
  42. 42. Surfin’ Safarihttp://www.webkit.org/blog/
  43. 43. Mozilla Developer Network https://developer.mozilla.org/en-US/
  44. 44. The Specification http://www.w3.org/
  45. 45. Considerations
  46. 46. IE F IREFOX W EB K IT O PERA2D Transforms IE 9 Firefox 3.5 Opera 10.53D Transforms IE 10Transitions IE 10 Firefox 4 Opera 10.5Animations Firefox 5
  47. 47. Final thoughts
  48. 48. “CSS3 Memory”http://media.miekd.com/css3memory/
  49. 49. “Kaleidoscope”http://www.kaleidoscopeapp.com/
  50. 50. “Reeder”http://reederapp.com/
  51. 51. Just because you can, doesn’t mean you should.
  52. 52. http://www.flickr.com/photos/8790226@N06/3577837508/
  53. 53. “The Illusion of Life:Disney Animation”by Ollie Johnston& Frank Thomas
  54. 54. “Anything composed of living flesh, no matter howbony, will show considerable movement within itsshape in progressing through action.”—Ollie Johnston & Frank Thomas, “The Illusion of Life: Disney Animation”
  55. 55. “If the character has anyappendages, such as longears or a tail or a big coat,these parts continue tomove a er the rest ofthe figure has stopped.”—Ollie Johnston & Frank Thomas,“The Illusion of Life: Disney Animation”
  56. 56. Thank You! @yaili

×