CSS3 ANIMATIONS

Ryan Kahn

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

Why use CSS for menus?

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

:hover

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/

Whoa, How do I do that?

:hover Transition Animation

Keyframe

From x to y

Transition

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

Transition

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

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

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

Animation

Animation

Warning: Use with restraint

Its not 1990.

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

Animation

-webkit-animation: animationName duration delay count direction fillMode

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

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

Keyframes

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

width:100px;}50%{

width:20px;}

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

Keyframes

Add a bunch more attributes to get something to dance:

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

Pause the animation

-webkit-animation-play-state: paused

This attribute can be fired on hover!

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

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

Animation VS Transition

Animations return to starting state afterwards

Transitions don’t

Animations give fine tuned control over keyframes

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

What about Javascript?

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

Cool Links!

Bouncing Ball:http://www.the-art-of-web.com/css/bouncing-ball-animation/

Morphing Cubes:http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

Collection of 47 Animations:http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

Ryan Kahn@Myztiq

Questions?