Upload
myztiq
View
1.557
Download
0
Tags:
Embed Size (px)
Citation preview
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?