I Will Never Write CSS Animations Again Without Using This Tool

CSS Animations are difficult to work with because they are hard to debug/test, or at least they would be if we didn’t have amazing animation dev tools built into the browser. In this video I will show you how to use the amazing dev tools built into both Chrome and Firefox.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:43 - Animation Dev Tool Basics
04:47 - Advanced Examples
10:45 - Firefox Dev Tools

#CSSAnimation #WDS #CSS

[maxfri]

Since there is a timeline to change the animations it would be cool to add a “bake animation” button to actually export the modified version back to code 🤔

[CZghost]

To be fair, I was today years old when I found about Animations tab in Chrome Developers Tool.

[comoyun]

Yeah, these tools make our life much easier. Loved it. Thanks.

[sanjaux]

The devtools window is so overly cluttered and ancient feeling that my brain didn’t even want to have it open long enough to find stuff like this wow

[amodywael]

And I was searching the web for how to reverse engineer css animations 😂

Thanks kyle

[ledger]

I swear, up until this past week I hated web development with a passion. Until Kyle showed up and I can finally understand this entire mess

[changx]

This is a game changer definitively ! :D

[MichaMichelsens]

hey thanks a lot - i never saw this animation tab in the Inspector and its so helpful.

[kirillvoloshin]

yeah, until your app is in react and uses classnames library

[CodingWithMrM]

What is the setup you're using like what is the came and the mic can you please lemme know?

[cavemutt]

Kyle, have you used the Firefox Developer browser? If so, have you noticed any significant differences from the regular Firefox browser? So far they're the same for me, but I haven't used it as extensively as you have to know a difference if I saw one. 🤷‍♂

[Mubasshir-nz]

hey Kyle, why have have you removed the Axios tutorial video.

[QvsTheWorld]

Unless I'm trying to do dynamic animations, I find using code instead of actual animation tools to be quite dreadful. To me, code is a logic tool to solve logic problem, it's completely maladapted to to solve visual problems.

[smartjefreycoca]

can your create a complete crash course in web dev tools in a browser

[jerK]

Nice tool, didn't know about this one. Definitely gonna use it.

I remember when Steve Jobs / HTML 5 fanboys said that HTML 5 can do everything better then Adobe Flash. Here we are +-8 years later, and i'm still waiting for it to happen. Killing Flash was one of the biggest mistakes that happend for webdevelopers. The tools we had 15 years ago in Adobe Flash we're better then we have today. Some things definitely got better, but allot of things got way worse.

[hellowerd]

It took them 10 years to get what Flash had in 2003

[xGSTQ]

I keep up to date with most features within the browser and have known about this for 12 months now. Had a play when it was first released and thought it was nice and all. The thing is you'll never use it. All I seem to use is linear 300ms or ease-in-out 300ms 😢

[userilesouldkhaled]

Hello, could you give me the roadmap of web developper
Thanks ❤

[MrDoodleDandy]

I didn't even know "scale" exists

[njordholm]

Well, I am glad YouTube also has some useful tools to change the speed of the video playback... You are talking way too fast for me non-native English speaker. In German we say: "Ohne Punkt und Komma reden." I have found, that 85% of the original speed is just right.