Mastering CSS Animations

2,097 views

Published on

This is the slide deck I used in a workshop about CSS animations, transitions and transforms. My students study Interactive Multimedia Design at Thomas More Mechelen. More info at http://www.weareimd.be

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,097
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Mastering CSS Animations

  1. 1. Mastering CSS animations and transitions
  2. 2. About me • Hi, I’m GoodBytes • I teach web development to my Interactive Multimedia Design students in Mechelen, Belgium. More info at http://www.weareimd.be • I’m a freelance web developer, get in touch via http://www.goodbytes.be or just shoot me a message on Twitter @GoodBytes
  3. 3. About this slide deck • I used this slide deck during a workshop I gave about CSS animations and uploaded them upon request • The slides will probably lose about 80% of their meaning without the accompanying explanation and demo’s given during the workshop • All screenshots you see are actually video’s to demo an animation. Like I said, this deck will lose about 80% of its meaning without the videos and matching explanation • If you’d like to get a thorough workshop about CSS animations, feel free to get in touch with me at http://www.goodbytes.be
  4. 4. When was the last time something on the web delighted you?
  5. 5. http://uxrave.com/
  6. 6. http://uxrave.com/
  7. 7. Live icon http://dribbble.com/pattern
  8. 8. http://space.angrybirds.com/launch/ http://joelb.me/scrollpath/
  9. 9. http://dribbble.com/shots/419244-Login-animation
  10. 10. http://www.smashingmagazine.com
  11. 11. animations, transitions, transformations, translates
  12. 12. you will be creating animations where you call a transform that uses a translate function
  13. 13. transitions • an animation between changes • properties we want to animate need to be defined explicitly • can be triggered by adding classes of using pseudo-selectors like :hover • example 1: change button color on hover (and animate it!) • example 2: motion by changing the position of an element
  14. 14. transitions • transition: property duration timing-function delay;
 transition: background-color 5s linear 1s;
  15. 15. <div id="circle"></div>! #circle! {! ! width: 200px;! ! height: 200px;! ! background-color: white;! ! border-radius: 50%;! ! transition: height 1s linear, width 1s linear, background-color 5s linear 1s;! }! ! #circle:hover! {! ! height: 300px;!! ! width: 300px;! ! background-color: red;! }!
  16. 16. transitions • transitioning properties like left and margin cause a browser to recalculate styles every frame. • repaints (visibility) & reflows (layout) • can be bad for performance, especially on slower mobile devices • solution: use CSS transformations to enable GPU hardware acceleration where appropriate
  17. 17. using translate using top/left coordinates
  18. 18. transform(ation)s • physically change the look of an element • example 1: change the size of an element • example 2: rotate/spin an element • example 3: move an element • can be 2D or 3D
  19. 19. transitions with transforms <div id="shape"></div>! #shape! {! ! width: 150px;! ! height: 150px;! ! background-color: #e74c3c;! ! transition: -webkit-transform 1s;! }! ! #shape:hover! {! ! -webkit-transform: scale(2) translateY(100px) rotate(45deg);! }!
  20. 20. you will be creating animations where you call a transform that uses a translate function
  21. 21. animations vs. transitions transitions animations go from A to B got from A (over B, C, D, E) to … via keyframes need to be triggered somehow can start automatically and loop you have to be formal about which properties you want to animate Transforms are ways to change your shapes with scale(), rotate(), skew(),…
  22. 22. 2D transforms • translate() • rotate() • scale() • skew() • matrix() = all of the above
  23. 23. <div id="square"></div>! #square! {! ! width: 200px;! ! height: 200px;! ! background-color: white;! ! border-radius: 10%;! ! margin-left: 0px;! ! transition: -webkit-transform 0.5s;! }! ! #square:hover, #square.automatic! {! ! -webkit-transform: scale(2.2) translate(200px, 100px) skew(10deg) rotate(45deg);! }!
  24. 24. animations • keyframes • can loop • can start automatically
  25. 25. <div id="square" class="automatic"></div>! .automatic! {! ! -webkit-animation: moveIt 2s infinite;! }! @-webkit-keyframes moveIt! {! ! 0% { }! ! 25% { -webkit-transform: rotate(45deg);}! ! 50% { left:50%; top: 50%; -webkit-transform: scale(2.5) rotate(45deg);}! ! 100% { -webkit-transform: rotate(0deg);}! }!
  26. 26. 3D transforms • -webkit-transform: perspective(300px) rotateY(20deg); • perspective() sets the angle of the view • the higher the value the further you are away from the element • the lower the value the closer you are to the element • your will be using rotateY() and rotateX() the most • x,y,z
  27. 27. y-axis x-axis
  28. 28. http://flisterz.com/foldcover/
  29. 29. http://codepen.io/s8770125/pen/gLrux
  30. 30. https://developer.mozilla.org/en-US/demos/detail/paperfold-css/launch
  31. 31. <div id="element" class="flipInY"></div>! .flipInY! {! ! -webkit-transform-origin: left bottom;!! ! -webkit-animation: flipInY 1s;! ! ! ! ! -webkit-animation-fill-mode: forwards;! }! ! @-webkit-keyframes flipInY! {! ! 0% { -webkit-transform: perspective(400px) rotateY( 90deg ); opacity: 0; }! ! 40% { -webkit-transform: perspective(400px) rotateY( -10deg ); }! ! 70% { -webkit-transform: perspective(400px) rotateY( 10deg ); }! ! 100% { -webkit-transform: perspective(400px) rotateY( 0deg ); opacity: 1; }! }!
  32. 32. you will be creating animations where you call a transform that uses a translate function
  33. 33. Get to work: animation1
  34. 34. Get to work: animation2
  35. 35. pitfalls
  36. 36. web dev hell
  37. 37. browser support • do I need vendor prefixes? • fallbacks? jQuery’s .animate()? • transforms on older browsers: cssSandpaper • performance (especially on mobile) • test test test! • use transforms instead of top/left/margin
  38. 38. considerations • does the animation distract from the information it should be supporting? • does your solution work on *any* device? • what’s the worst case scenario?
  39. 39. must read • http://www.sitepoint.com/advanced-css3-2d-and-3d-transformtechniques/ • http://learn.shayhowe.com/advanced-html-css/css-transforms • http://learn.shayhowe.com/advanced-html-css/transitions-animations • http://css3.bradshawenterprises.com/transitions/ • http://www.kirupa.com/html5/css3_animations_vs_transitions.htm • Bonus inspiration: http://uxrave.com/

×