Uploaded byAmber Makeyev
Practical CSS3 Animations
This document discusses practical uses of CSS3 animations for clients. It begins by showing examples of impressive but impractical animations done with CSS3 alone. It then covers the syntax of CSS3 transitions, transforms, and animations/keyframes that can be used to create subtle yet effective animations for sites. Examples are given of sites that use CSS3 animations well. The document concludes by encouraging the reader to create wonderful animations for clients while considering browser compatibility issues and avoiding overly complex or impractical animations.
Practical CSS3 Animations
- 1. Practical CSS3 Animations Foryou and your clients Amber Weinberg @amberweinberg
- 2. Practical CSS3 Animations Foryou and your clients Amber Weinberg @amberweinberg
- 3.
- 4. CSS3 is freakingawesome...
- 5. Logos in CSS.Amazing. Not practical. Http://cordobo.com/1630-internet-explorer-pure-css-logo/
- 6. Lots and lotsof impractical CSS code
- 7. Spiderman comic inCSS. Super cool. Not practical. Http://www.optimum7.com/css3-man
- 8. Sorry to bea killjoy but...
- 9. Something we canuse for any client.
- 10. Who cares? (Youdo, silly!)
- 12. Move to thebeat...
- 13.
- 15. Let’s do thetwist and turn, baby
- 16.
- 20. You come here,and I’ll go there...
- 21. CSS3 Animations &Keyframes
- 25. Can we havea flashing news ticker across the top?
- 26. Hired.Im A job boardthat donates money to teach kids how to code
- 27. Swinging logo inCSS3 With a teeny tiny bit of Javascript
- 28. Image Prep Centre pivotpoint of image exactly
- 32. BC Designers A portfoliosite with lots of animations
- 34. DC Internships A blogwith a ton of functionality
- 36. Browser Compatibility Not as bad as you think...
- 37.
- 38.
- 39. Go out andmake something wonderful...
- 40.
- 41. Find Me, Yay! website:www.amberweinberg.com twitter: @amberweinberg Find these slides & transcript on:
Editor's Notes
- #2 \n
- #3 \n
- #4 Who I am\nSlides will be available\nWho loves CSS?\n
- #5 Interesting features of CSS3\nWhy people are struggling with animations\n
- #6 Cool experiments in CSS\n
- #7 What makes this type of thing impractical? Check out the CSS for this. For one logo. Nuff said, right?!\n
- #8 Anthony Calzadilla\n
- #9 This is not what I’m going to teach you how to do today\n
- #10 Practical uses\nPrevious examples Not cost effective\nCSS3 super fast to implement\nOutline of talk\n
- #11 Give life to a plain website\nDownloads faster, not dependant on outside library\nWill eventually replace Javascript\n
- #12 Example of animation types\nReoutline talk\nCan be quite confusing at first glance\n
- #13 Transitions easiest to understand\nChanges property’s value\nUsed for rollovers & controlling speed & ease of change\n
- #14 First value property you want to change\nSecond speed of transition in seconds\nthird, easing effect, same as in jQuery\n
- #15 Explain example\nExplain keyword “all”\n
- #16 Transforms don’t perform anything animated\nRotate, skew, move(translate), scale\nCan be done to any element, including images\n
- #17 How to change a property\nType of transform & amount in degrees\nOne one axis only\ntransform origin & default value\n
- #18 No animation by themsellves\nput on hover\nrotated\nskewed\n
- #19 Combination\nCan make some complicated and interesting events\n
- #20 Multiple transforms, transitions and properties\nExplain example\n
- #21 Trickier\nDifference between transitions and animations\ncan’t fine tune the move or timing or multi direction\nLike flash\n
- #22 Explanation of keyframes & flash\nExplanation of rules\nAnimation direction\n
- #23 Explanation of demo\n
- #24 How animation direction works\n
- #25 Combining produces results\nSit down and play\n
- #26 \n
- #27 Hired.im job board that supports the community\ndonate listing fees\nlaunched portfolio listing\ngive away prizes\n
- #28 Paul Maloney designed site\nAnimated logo to look like swinging in the breeze\nSubtle effect, but heavier on hover, \nUses some JS\n
- #29 Took a bit of tinkering\nPoint of swing needs to be in exact middle\nUse PS guides and canvas size\n
- #30 first positioned logo with margins\nneeded to add a class of “right”\nExplanation of CSS & JS\n
- #31 just increased the degree of rotation\n
- #32 Could have been coded with an infinite animation loop & keyframes\nShould you use transitions or animations?\n
- #33 Explain site\nWhy I still use JS\n
- #34 Explain demo\n
- #35 Explain blog & animation\n
- #36 Explain demo\nAnimation shorthand\nWhy left of 0 in hover\n
- #37 No browsers can read the proper syntax yet\nMake sure to prepend\nPersonally use webkit & moz\nIf browser can’t read it\n
- #38 Clean coding practices come in handy\nThis is the previous example\nImagine using all of them\n
- #39 FF, Operam Safari, Chrome, smartphone devices all work\nOpera Mini & All IE doesn’t\nIE10 will\nCan still use\n
- #40 None of these examples are earth shattering\nIt’s the little things that count\nEaster eggs\nCost effective\n
- #41 \n
- #42 \n