• Save
Practical CSS3 Animations
Upcoming SlideShare
Loading in...5

Practical CSS3 Animations



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. ...

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.



Total Views
Views on SlideShare
Embed Views



1 Embed 1,258

http://www.amberweinberg.com 1258


Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • \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
  • Hired.im 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 Practical CSS3 Animations Presentation Transcript

  • Practical CSS3 AnimationsFor you and your clientsAmber Weinberg @amberweinberg
  • Practical CSS3 AnimationsFor you and your clientsAmber Weinberg @amberweinberg
  • Hello, there.
  • CSS3 is freaking awesome...
  • Logos in CSS. Amazing. Not practical. Http://cordobo.com/1630-internet-explorer-pure-css-logo/
  • Lots and lots of impractical CSS code
  • Spiderman comic in CSS. Super cool. Not practical. Http://www.optimum7.com/css3-man
  • Sorry to be a killjoy but...
  • Something we can use for any client.
  • Who cares? (You do, silly!)
  • Move to the beat...
  • CSS3 Transitions Syntax
  • Let’s do the twist and turn, baby
  • CSS3 Transforms Syntax
  • You come here, and I’ll go there...
  • CSS3 Animations & Keyframes
  • Can we have a flashing news ticker across the top?
  • Hired.ImA job board that donates money to teachkids how to code
  • Swinging logo in CSS3 With a teeny tiny bit of Javascript
  • Image PrepCentre pivot point of image exactly
  • BC DesignersA portfolio site with lots of animations
  • DC InternshipsA blog with a ton of functionality
  • Browser Compatibility Not as bad as you think...
  • Vendor Prefixes Suck
  • From http://caniuse.com
  • Go out and make something wonderful...
  • ...But not this
  • Find Me, Yay!website: www.amberweinberg.comtwitter: @amberweinbergFind these slides & transcript on: