Barbarian Meets Coding

WebDev, UX & a Pinch of Fantasy

1 minute readbarbaric-tip-of-the-week

Barbaric Tip of The Week: Improve Your CSS Animation Workflow With FireFox Dev Tools Challenger

Barbaric Tip of the Week is a weekly series whose main purpose is to share tiny bits of knowledge that I find specially useful and interesting.

This week’s Barbaric Tip is the great Firefox Dev Tools Challenger, a super creative way to showcase and teach the latest FireFox support for working with CSS Animations. The new animation panel lets you:

  • Play and pause animations (you can also do this in Chrome)
  • Edit cubic beziers
  • Scrub the animation timeline
  • Great support for working with CSS Filters a.k.a. the instagram of the web
  • Use the eyedropper tool to easily select matching colors (also on Chrome)
  • Rewind the animation timeline
  • Detect obscured animations

Check it out at

Dev Tools Challenger

And if you are interested in learning more about Web Animation follow @rachelnabors on the twitterverse and subscribe to her Web Animation Weekly newsletter. Have a great day!

Jaime González García

Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García