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:
Prettier CSS Animation Video: • Can I Create This VERY...
Loading Spinner Animation Video: • How To Create An Advan...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:43 - Animation Dev Tool Basics
04:47 - Advanced Examples
10:45 - Firefox Dev Tools
#CSSAnimation #WDS #CSS

[@maxfri6680]

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 🤔

[@comoyun]

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

[@CZghost]

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

[@adityaanuragi6916]

Same

[@tuancao85]

Love this. Thanks Kyle!

[@atharvabhosale3529]

I absolutely love your videos :)

[@MichaMichelsens]

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

[@shahfaisal3923]

great work. Thanks for sharing.

[@theisoj]

Thanks Kyle as always! 👍

[@truongthanhtrung5056]

It's so useful, thank you🧒

[@DevMeloy]

Very cool stuff!

[@chang112x]

This is a game changer definitively ! :D

[@a7modywael51]

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

[@a7modywael51]

@@biggestthreattoyourexistence 😒

[@dadou9590]

The keyframe chrome extension is also great

[@RegalWK]

Great video!

[@anasouardini]

I never knew that exists, thank you.

[@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

[@DamonCahill]

legendary ty!

[@kirillvoloshin2065]

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

[@kurtthorsten4463]

:')

[@prerit714]

The truth has been said *Cries in enterprise

[@genechristiansomoza4931]

Then your react limits you

[@Kokouvi_el_mejor]

Ramer motion for react...

[@nro337]

Nice video!

[@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. 🤷‍♂

[@LosfrogerX]

Firefox dev edition is a nightly build so it has the latest features

[@rand0mtv660]

@@LosfrogerX No, Firefox Nightly is the nightly build. Firefox Developer Edition is basically the beta version with maybe some tweaks that might help during development such as running unsigned extensions more easily or things like that. You can also use it if you want a bit faster access to newer features since you are using the beta version of the browser in that case. Basically Firefox Nightly is the alpha version, Firefox Developer Edition is beta and regular Firefox is the regular release.

[@ledger9972]

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

[@baconhair5937]

u are a complete lier

[@smartjefreycoca5425]

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

[@berrodev]

I wish we had a graph editor :(

[@user-xo2ge7gp8j]

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

[@user-nv1os5ni1y]

thanku

[@user-nv1os5ni1y]

thankuu

[@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.

[@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 😢

[@user-zj3lt2ip5b]

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

[@dei8bit]

yeah

[@jerK2023]

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.

[@MrKlarthums]

Steve Jobs, IMO, said that mainly to crush competition, not out of merit. Allowing Flash would allow for App Store competitors.

[@estate0007]

I thought exactly the same, but recently I found GSAP. This framework gives me back my optimism when it comes to interactive web animations. And things like ScrollTrigger were simply not possible with Flash. Btw, Jack, the founder, started GSAP back in the days as an extension for Flash.

[@matterexplorer]

Authoring animations/transitions was definitely easier for people without developer skills. Now everyone lives in their tool; A designer nowadays will more likely recreate this animation in figma than open a secondary window in the developer tools of the target platform. A developer will probably copy&paste&hot-reload from some IDE. Then we have 4 authoring UIs to do 1 thing; one each in chrome, Firefox, figma, vsCode,... just to name the most popular ones

[@abdulazezzeinuali7983]

you have same voice as Mr. Robot

[@null_spacex]

No he doesn't

[@MrDoodleDandy]

I didn't even know "scale" exists

[@hellowerd]

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

[@siddheshposam3665]

learn by doing from terminal

[@siddheshposam3665]

learn by doing

[@namishkapoor9772]

Please make you video in slow vocal. You are very fast in speaking and sometimes we have to watch again and again to listen what did you just said before😊

[@njordholm]

Well, I am glad KZbin 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.

[@ayokotimilehin8140]

Lol

[@Designer_Fact]

Hare Krishna 🙏🏻

[@j.k24]

bet figma will create a better ui for animation which output the css

[@ParkingLotStudioGames]

so? what is this "tool"? No mention of the tool in the title, no view

[@markambrus2934]

It is built into the browser smartass.

[@KyleJMitchell]

Good on you for engaging with the video and showing the algorithm that it's worth the time for more people to watch! 👍

[@ParkingLotStudioGames]

​@@KyleJMitchell the guy is big enough for a couple comments to matter. I'm not hating or saying the opposite of your comment, smart mouth. If you read my comment all I'm asking is the name of the tool. I never said I wished the video had less engagement nor that the algorithm should not pick it up. If that was my premise I would've clicked don't recommend and moved on but I decided to comment asking a question and explaining why I asked that question. Check that reading comprehension my man.

[@hiryuimajin]

​@@ParkingLotStudioGamesyou're the tool

[@wb4529]

hehe

[@govinda399]

you should never use absolute words like "never, always"

[@MaskedMuchacho07]

I love your video's but for the love of god please take a breath every now and then

[@alan_1213]

It’s all good but its all adds up and make chrome so slow. It’s already heavy and slow 😢

[@KyleJMitchell]

Stuff like this doesn't make Chrome slow. Caching and prefetching all sorts of pages for your current location and possible destinations to provide snappy load times is what makes Chrome slow. Resource hogging is just that: the program hogging resources. Mostly RAM, and mostly by storing too much for the system underneath the program to have enough memory left over to render the application's chrome. Small tools like these, used for analyzing and rendering visualizations based on simple CSS rules, aren't going to take much effort from even a mid-range processor.

[@ongke3655]

only low on init

[@JustinGeorgejgm]

First here. FYI: im not proud of this 😅

[@moviecentral6516]

Misleading title 😂

[@LokiDaFerret]

Me thinks you are speeding up your narration. Either that or you just talk remarkably fast.

[@funkizer]

A very clickbatey title. Sorry to say because you have good videos. Thumb down.

[@funkizer]

To fix just replace "this too" with the actual name of the tool please.

[@opinionatedopiner]

stop bobbing your head left to right. it's distracting. or keep doing it but take your head out of the video. thanks. Edit: a lot of us watch tuts in 1.25 or 1.5 speed and your head bobbing at accelerated speed in EVERY video is mildly irritating.

[@user-nv1os5ni1y]

thankuu