CSS3 Animations<br />Ryan Kahn<br />
Because its just so cool<br /><ul><li>Backwards Compatibility
Progressive Enhancement
Fast
Light – The Browser does the heavy lifting</li></ul>Why use CSS for menus?<br />
http://ryan-kahn.com/css3menu/hover.html<br />:hover<br />
Yea, that may be neat and all…<br />But what if you could do something better.<br />Games:<br />http://ryan-kahn.com/onlyC...
Whoa, How do I do that?<br />:hover<br />Transition<br />Animation<br />Keyframe<br />
From x to y<br />Transition<br />
Transition<br />-webkit-transition: property duration timing-function<br />-webkit-transition: border 2s linear<br />-webk...
Transition<br />OR we could be super lazy:<br />-webkit-transition: all 3s linear<br />http://ryan-kahn.com/css3menu/trans...
Bounce that thing around and leave me where I started at the end<br />Animation<br />
Animation<br />Warning: Use with restraint<br />Its not 1990.<br />http://ryan-kahn.com/css3menu/DontYouEverDoThisPlease.h...
Animation<br />-webkit-animation: animationName duration delay count direction fillMode<br />loopType: normal,alternate<br...
Keyframes<br />@-webkit-keyframeskeyframeName {<br />from{<br />width:100px;<br />border:15px solid orange;<br />}<br />to...
Keyframes<br />@-webkit-keyframeskeyframeName{<br />	0%,100%{<br />		width:100px;<br />	}<br />	50%{<br />		width:20px;<br...
Keyframes<br />Add a bunch more attributes to get something to dance:<br />http://ryan-kahn.com/css3menu/keyframes2.html<b...
Pause the animation<br />-webkit-animation-play-state: paused<br />This attribute can be fired on hover!<br />http://ryan-...
Putting it all together<br />CSS Menu<br />Hidden sub layer<br />:hover<br />Trigger animation or transition<br />Causes m...
Animation VS Transition<br />Animations return to starting state afterwards<br />Transitions don’t<br />Animations give fi...
When to use what<br />Causing something to change on a mouseovermost likely ends up in a transition<br />Causing something...
Upcoming SlideShare
Loading in …5
×

Css3 animations

1,905 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,905
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Css3 animations

  1. 1. CSS3 Animations<br />Ryan Kahn<br />
  2. 2. Because its just so cool<br /><ul><li>Backwards Compatibility
  3. 3. Progressive Enhancement
  4. 4. Fast
  5. 5. Light – The Browser does the heavy lifting</li></ul>Why use CSS for menus?<br />
  6. 6. http://ryan-kahn.com/css3menu/hover.html<br />:hover<br />
  7. 7. Yea, that may be neat and all…<br />But what if you could do something better.<br />Games:<br />http://ryan-kahn.com/onlyCSS<br />Menus:<br />http://ryan-kahn.com/css3menu/<br />
  8. 8. Whoa, How do I do that?<br />:hover<br />Transition<br />Animation<br />Keyframe<br />
  9. 9. From x to y<br />Transition<br />
  10. 10. Transition<br />-webkit-transition: property duration timing-function<br />-webkit-transition: border 2s linear<br />-webkit-transition: opacity 3s ease-in<br />-webkit-transition: border-radius 3s ease-out<br />http://ryan-kahn.com/css3menu/transition.html<br />
  11. 11. Transition<br />OR we could be super lazy:<br />-webkit-transition: all 3s linear<br />http://ryan-kahn.com/css3menu/transitionLazy.html<br />
  12. 12. Bounce that thing around and leave me where I started at the end<br />Animation<br />
  13. 13. Animation<br />Warning: Use with restraint<br />Its not 1990.<br />http://ryan-kahn.com/css3menu/DontYouEverDoThisPlease.html<br />
  14. 14. Animation<br />-webkit-animation: animationName duration delay count direction fillMode<br />loopType: normal,alternate<br />fillMode: forwards,backwards,both,none<br />
  15. 15. Keyframes<br />@-webkit-keyframeskeyframeName {<br />from{<br />width:100px;<br />border:15px solid orange;<br />}<br />to{<br />width:300px;<br />border:30px solid green;<br />}<br />}http://ryan-kahn.com/css3menu/keyframes.html<br />
  16. 16. Keyframes<br />@-webkit-keyframeskeyframeName{<br /> 0%,100%{<br /> width:100px;<br /> }<br /> 50%{<br /> width:20px;<br /> }<br />}<br />http://ryan-kahn.com/css3menu/keyframes1.html<br />
  17. 17. Keyframes<br />Add a bunch more attributes to get something to dance:<br />http://ryan-kahn.com/css3menu/keyframes2.html<br />
  18. 18. Pause the animation<br />-webkit-animation-play-state: paused<br />This attribute can be fired on hover!<br />http://ryan-kahn.com/css3menu/keyframes2pause.html<br />
  19. 19. Putting it all together<br />CSS Menu<br />Hidden sub layer<br />:hover<br />Trigger animation or transition<br />Causes menu to slide down, borders to change and color changes<br />Leave :hover<br />Trigger animation or transition<br />Causes menu to slide back up, reset things back to normal<br />
  20. 20. Animation VS Transition<br />Animations return to starting state afterwards<br />Transitions don’t<br />Animations give fine tuned control over keyframes<br />
  21. 21. When to use what<br />Causing something to change on a mouseovermost likely ends up in a transition<br />Causing something to bounce into view for x seconds then return to its previous state is an animation<br />
  22. 22. What about Javascript?<br />When we include javascript into the mix we can fire off animations, transitions etc. with a simple<br />$(“.bounce”).addClass(“bounce”);<br />
  23. 23. Cool Links!<br />Bouncing Ball:http://www.the-art-of-web.com/css/bouncing-ball-animation/<br />Morphing Cubes:http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html<br />Collection of 47 Animations:http://webdesignerwall.com/trends/47-amazing-css3-animation-demos<br />
  24. 24. Ryan Kahn<br />@Myztiq<br />Questions?<br />

×