1. CSS3 Animation Pre-calculated keyframe animations Procedurally "tweened" by the browser

2. Two kinds of CSS3 Animation Transitions Automatically jump from previous CSS You set where it will end up after animating Animations Groups of Keyframes of CSS property values Named and referred back to by CSS More powerful; work differently than Transitions

3. Benefits NO JAVASCRIPT PROGRAMMING Many situations still require it to control things Recycle your work Browser support = less battery use Possibly direct GPU acceleration = less battery Old browsers skip the unknown CSS

4. Downside to CSS3 Animation Lack of browser support CPU loads and GPU loads currently are higher Browser bugs in those that support it CSS becomes larger more complex CSS "situations" can become more tricky Keyframes are pre-calculated, complex situations and animations still use javascript

5. Transitions http://www.w3.org/TR/2009/WD-css3- transitions-20091201 transition-property:color, background-color; transition-duration: 1s; transition-delay:0s; transition-timing-function: ease-in-out;

6. div{ color: black; } div:hover { transition-property: color; transition-duration: 1s; transition-delay: 0s; color: red; } Browser will use whatever the properties WERE You can look up DOM events to trigger JS

7. Animations http://www.w3.org/TR/css3-animations animation-name: @keyframe group_name; animation-duration: 1s; animation-delay: 0s; animation-direction: forward; animation-timing-function: linear; animation-iteration-count: infinite;

8. @keyframe From 0% (start) to 100% (finish) @keyframes yourAnimationName{ 0%{ color:blue; } 50%{ color:green; } 100%{ color:red; } }

9. @keyframes yourAnimationName{ 0%{ color:blue; } 50%{ color:green; } 100%{ color:red; } } div:hover{ animation-name: yourAnimationName; animation-duration: 1s; animation-iteration-count: infinite; }

10. Hints Use a live CSS editor like Web Developer Toolbar Create experiment page for trying animations Some CSS properties may not animate in all browsers at the same time - may look odd… BOTH need a DURATION time otherwise they do not animate (it happens instantly.) LOOK AT THE w3c.org SPECS