CSS3 Animations - HTML5 DevCon 2013

Helped write "HTML5 and Css3 for Real World" book I like
Has writtwn another book on css3 animations, looks like its on github!


animation: spirit and life, "breath life into things"

Animations add visual feedback to users; create more immersive websites, more fun,
 if you have an img then why not animate

Two Animation Routes in css3
1. transitions
    - these are fast
    - but no built in way to repeat, so can't loop e.g. boucing type spring
    - best for on/off type stuff
    - can only do a to b

2. keyframes (aka css anmiations)
    - a little slower cos browsers not doing


Transitions
2 required properties: transition-property and transition-duration
There is a shorthand for that css styel
You can include multiple transitions on 1 line

Site she likes:
 delta.com  their search box top right expands on focus
 shareagift.com as you scroll then notice the top nav bar animation
 webplatform.org example of cool css lightbox

You an create that arrow using a div and css, no need for image.

She showed

jsbin.com like jsfiddle?
dabble.com

"10 secrets you may not know about css"

lightbox: spreads tall then goes wide or wide and then tall



Keyframes aka CSS Animations
Two step process to setup
1. setup frames
2. call animation property

To do 3D animations you must set perspective. 800 seems to be the sweet spot

Animate css is a great site for seeing animations, and you can see code too



Tip: Don't just background image, animate it. e.g. red img on strikebedt.com