Breaking-down CSS animation demos with Firefox DevTools

I have recently started this series of videos with the idea of showing how various features of the FirefoxDevTools could be used to break-down and understand how seemingly complex CSS animations were done.

Multiple box-shadows and animated ::before and ::after pseudo-elements:

Preview transforms, and highlight selectors:

Work with iframes and pause animations:

That’s it for now. More to come.

Follow my channel on YouTube!