How To Create Performant CSS Animations

🚨 IMPORTANT:

As a web developer have you ever wondered why your animations are so choppy? It seems like you are only changing minor parts of the animation, but it never quite looks right. Well in this video I will be showing you exactly why your animations look choppy, how to improve them, and how to use the dev tools in Chrome to test your animations.

🧠 Concepts Covered:

- How the browser renders CSS
- How to optimize CSS animations
- How to use Chrome dev tools
- Which CSS properties to animate

🌎 Find Me Here:

#CSS #WDS #CSSAnimation

[ednh]

transform and opacity are the only two params we should animate. This is the rule #1 for the subject. 👍🏼

[nsharma]

This was one hell of an eye opening video! What I love about this channel is, it has a balanced mix of videos that cater to popular demands, and videos on underrated but important topics like this. All the data in the performance tab is no more like hieroglyphics to me, lol. Thanks Kyle! 😄

[jorden]

Thanks for this important video!
A personal story - I studied Electrical Engineering, I've worked as a DevOps Engineer (damn you Covid-19) and now I use my free time to learn new WebDev things such as html, css, js, vue.js 3 node.js (front/back and techs)... Combined with my knowledge in docker containerization, you can actually make a living (as a freelance), which is something I strive to reach as a side job (just in case).

Thanks for creating these wonderful tutorials and videos that simplify my understanding of reading when I dive into different documentaries and need another point of view to get it better.

[thethmuueinsoe]

Thanks Kyle. I've always wondered why animations on some popular sites
often lag and seems uncomfortable to look at. Now you've explained me
precisely.

[cartersnook]

Another thing to note is that changing the height of the page also negatively affects perfomance, but devtools doesn't include that in the data. Therefore, you're always best to keep your website the same height 👍

[creativedeveloper]

Great stuff Kyle! I can't find any other contents out there explains this better than you did!
Keep it up!

[ServanFICHET]

Got hypnotized by the text going up and down during 12min... 😅

[PeterFelis]

Thanks for this! Next to the animation lesson, I was not aware that those tools are available in the browser. thank you so much

[vugarbakhshalizade]

I love your short and precise explanations. Thank you for it!

[stills]

I was wondering why my animation was choppy on my phone but super smooth on my computer. Thanks!!

[artbykryssi]

mind blown! great video learnt so much.

[oapostrocon]

Thanks Kyle -- this was a super helpful video. For whatever reason, yt doesn't seem to promote it as much as some of your others, but I definitely want to add my vote to the other folks asking for more content where you drill into Dev Tools.

[MichaelM]

Thanks for the detail explanation of cpu/gpu usage behind the scenes.

[rockfox]

OMg this is so awesome to discover as part of my learning. I will definitely keep this in mind. Thank you! I am going to smash that subscribe button right now!

[rommelphilipafurong]

Thanks so much for this sir Kyle, its now clearer to me why am I using transforms and opacity. Im so grateful I'm on the right track but I dint get any further explanations like this. Keep it Up Sire. Have a great day and happy coding !

[maorben]

Thank you!
Can you do more videos on performance analyzing with Chrome?

[nurantarlan]

Super super cool content Kyle, thanks a lot for explaining )

[hachaluwami]

transform and opacity is the first css animation😁😋😛

[usama]

Amazing I've never seen such an amazing video about Thank you sir!

[pgmattic]

Cool animation tutorial. Lot to learn from it.