CSS3 Transitions Gotchas May 8th, 2013

  • Be very careful when using transition-property: all. You will get TransitionEnd events for properties that you didn’t expect to ever transition
  • Be careful when using shorthand properties, because the number of triggered events varies between browsers
  • Opera and IE don’t trigger events when a negative delay cancels out the duration
  • WebKit has real issues with the priority of properties such as transition-property: margin, margin-left. Avoid this for now
  • IE doesn’t support implicit transitions — for example, triggered for padding: 2em when font-sizechanges
  • Firefox and Opera cannot parse transition-property: all, width
  • Opera mixes up the priority of properties
  • Transitions on pseudo-elements do not trigger TransitionEnd events
  • IE 10 has a weird :hover bug when transitioning pseudo-elements
  • The specification leaves a lot of room for improvement

Resources