Hybrid Conf: CSS in the 4th dimension: Not your daddy's CSS animations

Hybrid Conf: CSS in the 4th dimension: Not your daddy's CSS animations

CSS in the 4th dimension: Not your daddy's CSS animations presented by Lea Verou (@leaverou) at HybridConf 2013. Lea discussed the amazing things you can achieve with CSS transitions and CSS animations. Here's what I learned from her talk.

  • CSS 2 was 2 dimensional, CSS 3 added both depth and time.
  • Don't just make things appear, abruptness is bad UX.
  • Transitions are not just fluff, they communicate what is happening.
  • You must balance causing a delay and giving a benefit, delays are worse than abruptness.
  • Transitions already have great browser support and you can safely use them today.
  • Transitions allow you define a single property for transition or all properties.
  • Transitions can be delayed.
  • You can have multiple transitions through careful timing.
  • You cannot animate between keywords such as display block/none. Yet!
  • CSS images level 4 can animate between images which is already supported in Chrome.
  • Understanding cubic Bezier will make your transitions much better, cubic-bezier is a great website for learning.
  • Transitions cannot be fired on page load.
  • Transitions cannot be set to repeat.
  • Animate allows states.
  • Animate can repeat.
  • Animate has better support than APNG so is better to use for animations containing transparency.
  • Prefixr is a great tool for generating prefixes.
  • You can use CSS box shadows to fade the background behind modal windows.

Note. Lea's talk consisted of a lot of real time coding which is not recorded within these notes.

Lea Verou presents CSS in the 4th dimension: Not your daddy's CSS animations
Lea Verou presents CSS in the 4th dimension: Not your daddy's CSS animations.