rchristiani / llc-css3-animations

Starter workshop content template for Ladies Learning Code

CSS Animations

Overview

http://desandro.github.io/3dtransforms/

• Start with the history of css animations
  • :hover/:focus
    • Example of hover
  • 2007/2009 was the start
    • https://www.webkit.org/blog/138/css-animation/
    • Pushed by apple
    • First Draft published in 2009
    • First appeared in safari in 2007
  • Browser support
    • terrible at first
    • getting better
    • Talk about browser pre-fixes?
• Overview of what we will do
  • Simple transitions on the nav
    • Gradient
    • Color
    • Expand
  • More complex keyframe animations on the logo
    • Bounce?
      • Shows keyframes and animations
  • 3d animation
    • Flip the social Icons?
      • Show the info on the back?
    • Or use the favourite things and do something with that.
      • Show the title of the favourite thing on the back
• At the end show some Tympanus examples.
  • Letter animation example
  • Stacked cards