Day 3: CSS animations

On Day 3, I play with CSS animations.

Today I ran through some basic CSS animation concepts. I've seen Mary Lou's countless animation demos on Codrops, and they are AMAZING. Seriously, check them out.

I learnt about:

  • CSS transitions
  • Using the :hover pseudo selector effectively
  • Named keyframe animations
  • 3D transforms

I want to sit down and construct a few full animation demos like one of the Codrops pages one day. I want to explore 3D transforms more, and also see if I can turn some of these into reusable components one can just drop into a page.

I've added one of the hover effects to the links on this site as well.

Have a look at the source code on Github.

Resources

  • http://css-tricks.com/almanac/properties/a/animation/
  • Loads of other css-tricks articles. Chris Coyier is a god.
  • http://tympanus.net/Development/ArrowNavigationStyles/