Course wrap-up and resources
goes to the animations tab next to console.
Chrome records and groups animations together into sets. Then you can jump back to a set and play back the animation.
for firefox
a fun tutorial to teach you how to use the devtools by completing challenges.
Neither Chrome or Firefox have the perfect animation toolset. They are both based on the Adobe Flash toolset. Flash had a lot more limitations so easier to create tools. Still, they make animation development much faster.
Web animation API and what's next
CSS animations are great, but can't do it all. Enter the web animation API.
cdpn.io/vOEwrW what it can do, that CSS can't do alone.
If you add several instances of the same CSS animation, you cannot sync them (run them synced), because they all have their own internal timing.
With the web animation API you can copy the timeline from one animation to another.
You can also change the speed of the animation (even as a browser preference setting).
also: rachenabors.com/waapi
slack.animationatwork.com
survey : goo.gl/B8ap2d
the most exciting part of waapi for her is being able to move your animation definitions to the JS and not having to use huge libraries (GSAP) or someone else's SASS mixins.