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

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

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

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

Transitions transitions transition-property:color, background-color; transition-duration: 1s; transition-delay:0s; transition-timing-function: ease-in-out;

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

Animations group_name; animation-duration: 1s; animation-delay: 0s; animation-direction: forward; animation-timing-function: linear; animation-iteration-count: infinite;

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

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

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