Practical CSS3 Animations


Published on

I’m going to talk about some practical uses of CSS3 animations, transitions and transforms. You know, something you can use for almost any client.

While animating comics and recreating logos in CSS3 show just how powerful it can be, it’s not really useful or cost effective for actual productions. I’m going to show you some smaller animations that are super quick to implement and give just the right amount of movement. I’ll first teach you the basics of CSS3 transitions, transforms and animations. Then, I’ll show you some examples of animations I’ve used for my own clients, to give you a taste of just what can be done.

Published in: Design, Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • Who I am\nSlides will be available\nWho loves CSS?\n
  • Interesting features of CSS3\nWhy people are struggling with animations\n
  • Cool experiments in CSS\n
  • What makes this type of thing impractical? Check out the CSS for this. For one logo. Nuff said, right?!\n
  • Anthony Calzadilla\n
  • This is not what I’m going to teach you how to do today\n
  • Practical uses\nPrevious examples Not cost effective\nCSS3 super fast to implement\nOutline of talk\n
  • Give life to a plain website\nDownloads faster, not dependant on outside library\nWill eventually replace Javascript\n
  • Example of animation types\nReoutline talk\nCan be quite confusing at first glance\n
  • Transitions easiest to understand\nChanges property’s value\nUsed for rollovers & controlling speed & ease of change\n
  • First value property you want to change\nSecond speed of transition in seconds\nthird, easing effect, same as in jQuery\n
  • Explain example\nExplain keyword “all”\n
  • Transforms don’t perform anything animated\nRotate, skew, move(translate), scale\nCan be done to any element, including images\n
  • How to change a property\nType of transform & amount in degrees\nOne one axis only\ntransform origin & default value\n
  • No animation by themsellves\nput on hover\nrotated\nskewed\n
  • Combination\nCan make some complicated and interesting events\n
  • Multiple transforms, transitions and properties\nExplain example\n
  • Trickier\nDifference between transitions and animations\ncan’t fine tune the move or timing or multi direction\nLike flash\n
  • Explanation of keyframes & flash\nExplanation of rules\nAnimation direction\n
  • Explanation of demo\n
  • How animation direction works\n
  • Combining produces results\nSit down and play\n
  • \n
  • job board that supports the community\ndonate listing fees\nlaunched portfolio listing\ngive away prizes\n
  • Paul Maloney designed site\nAnimated logo to look like swinging in the breeze\nSubtle effect, but heavier on hover, \nUses some JS\n
  • Took a bit of tinkering\nPoint of swing needs to be in exact middle\nUse PS guides and canvas size\n
  • first positioned logo with margins\nneeded to add a class of “right”\nExplanation of CSS & JS\n
  • just increased the degree of rotation\n
  • Could have been coded with an infinite animation loop & keyframes\nShould you use transitions or animations?\n
  • Explain site\nWhy I still use JS\n
  • Explain demo\n
  • Explain blog & animation\n
  • Explain demo\nAnimation shorthand\nWhy left of 0 in hover\n
  • No browsers can read the proper syntax yet\nMake sure to prepend\nPersonally use webkit & moz\nIf browser can’t read it\n
  • Clean coding practices come in handy\nThis is the previous example\nImagine using all of them\n
  • FF, Operam Safari, Chrome, smartphone devices all work\nOpera Mini & All IE doesn’t\nIE10 will\nCan still use\n
  • None of these examples are earth shattering\nIt’s the little things that count\nEaster eggs\nCost effective\n
  • \n
  • \n
  • Practical CSS3 Animations

    1. 1. Practical CSS3 AnimationsFor you and your clientsAmber Weinberg @amberweinberg
    2. 2. Practical CSS3 AnimationsFor you and your clientsAmber Weinberg @amberweinberg
    3. 3. Hello, there.
    4. 4. CSS3 is freaking awesome...
    5. 5. Logos in CSS. Amazing. Not practical. Http://
    6. 6. Lots and lots of impractical CSS code
    7. 7. Spiderman comic in CSS. Super cool. Not practical. Http://
    8. 8. Sorry to be a killjoy but...
    9. 9. Something we can use for any client.
    10. 10. Who cares? (You do, silly!)
    11. 11. Move to the beat...
    12. 12. CSS3 Transitions Syntax
    13. 13. Let’s do the twist and turn, baby
    14. 14. CSS3 Transforms Syntax
    15. 15. You come here, and I’ll go there...
    16. 16. CSS3 Animations & Keyframes
    17. 17. Can we have a flashing news ticker across the top?
    18. 18. Hired.ImA job board that donates money to teachkids how to code
    19. 19. Swinging logo in CSS3 With a teeny tiny bit of Javascript
    20. 20. Image PrepCentre pivot point of image exactly
    21. 21. BC DesignersA portfolio site with lots of animations
    22. 22. DC InternshipsA blog with a ton of functionality
    23. 23. Browser Compatibility Not as bad as you think...
    24. 24. Vendor Prefixes Suck
    25. 25. From
    26. 26. Go out and make something wonderful...
    27. 27. ...But not this
    28. 28. Find Me, Yay!website: www.amberweinberg.comtwitter: @amberweinbergFind these slides & transcript on: