21
CSS3 ANIMATIONS Ryan Kahn

Css3 animations

  • Upload
    myztiq

  • View
    1.557

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Css3 animations

CSS3 ANIMATIONS

Ryan Kahn

Page 2: Css3 animations

Because its just so cool• Backwards Compatibility• Progressive Enhancement• Fast• Light – The Browser does the heavy lifting

Why use CSS for menus?

Page 3: Css3 animations

http://ryan-kahn.com/css3menu/hover.html

:hover

Page 4: Css3 animations

Yea, that may be neat and all…But what if you could do something better.

Games:http://ryan-kahn.com/onlyCSS

Menus:http://ryan-kahn.com/css3menu/

Page 5: Css3 animations

Whoa, How do I do that?

:hover Transition Animation

Keyframe

Page 6: Css3 animations

From x to y

Transition

Page 7: Css3 animations

Transition

-webkit-transition: property duration timing-function

-webkit-transition: border 2s linear -webkit-transition: opacity 3s ease-in -webkit-transition: border-radius 3s ease-

out

http://ryan-kahn.com/css3menu/transition.html

Page 8: Css3 animations

Transition

OR we could be super lazy: -webkit-transition: all 3s linear

http://ryan-kahn.com/css3menu/transitionLazy.html

Page 9: Css3 animations

Bounce that thing around and leave me where I started at the end

Animation

Page 10: Css3 animations

Animation

Warning: Use with restraint

Its not 1990.

http://ryan-kahn.com/css3menu/DontYouEverDoThisPlease.html

Page 11: Css3 animations

Animation

-webkit-animation: animationName duration delay count direction fillMode

loopType: normal,alternate fillMode: forwards,backwards,both,none

Page 12: Css3 animations

Keyframes

@-webkit-keyframes keyframeName {from{

width:100px;border:15px solid orange;

}to{

width:300px;border:30px solid green;

}}http://ryan-kahn.com/css3menu/keyframes.html

Page 13: Css3 animations

Keyframes

@-webkit-keyframes keyframeName {0%,100%{

width:100px;}50%{

width:20px;}

}http://ryan-kahn.com/css3menu/keyframes1.html

Page 14: Css3 animations

Keyframes

Add a bunch more attributes to get something to dance:

http://ryan-kahn.com/css3menu/keyframes2.html

Page 15: Css3 animations

Pause the animation

-webkit-animation-play-state: paused

This attribute can be fired on hover!

http://ryan-kahn.com/css3menu/keyframes2pause.html

Page 16: Css3 animations

Putting it all together

CSS Menu Hidden sub layer

:hover Trigger animation or transition Causes menu to slide down, borders to

change and color changes Leave :hover

Trigger animation or transition Causes menu to slide back up, reset things

back to normal

Page 17: Css3 animations

Animation VS Transition

Animations return to starting state afterwards

Transitions don’t

Animations give fine tuned control over keyframes

Page 18: Css3 animations

When to use what

Causing something to change on a mouseover most likely ends up in a transition

Causing something to bounce into view for x seconds then return to its previous state is an animation

Page 19: Css3 animations

What about Javascript?

When we include javascript into the mix we can fire off animations, transitions etc. with a simple $(“.bounce”).addClass(“bounce”);

Page 21: Css3 animations

Ryan Kahn@Myztiq

Questions?