How To Create Performant CSS Animations

🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/...
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:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#CSS #WDS #CSSAnimation

[@ed1nh0]

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

[@randerins]

Valeu pela dica!

[@sapindersingh1165]

admirable advice!

[@toddhoward5947]

What about transition: all Nav links color change is a simple way to create interaction

[@migueldomingos4570]

And colors

[@ed1nh0]

@@toddhoward5947 transitions are not animations. They just appear to behave like so.

[@nsharma4981]

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! 😄

[@thethmuucodes]

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.

[@creativedeveloper6921]

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

[@vugarbakhshalizade2826]

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

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

[@jorden123]

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.

[@nurantarlan]

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

[@CodingUnited]

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 👍

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

[@rockfox5]

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!

[@justsharesumn]

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.

[@mauriciosotoa8130]

please more of these details. You explain it very well. thanks

[@stills2359]

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

[@ultradevx]

Cool animation tutorial. Lot to learn from it.

[@MichaelM1800]

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

[@WebDevSimplified]

Glad it was helpful!

[@ServanFICHET]

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

[@allenhebert4918]

I’m hypnotized by Kyles Voice, he hides his hands so you can’t see if theres a wedding ring????

[@StephenRayner]

Excellent video, thank you very much.

[@chhavimanichoubey9437]

saved my life right there man.

[@maorben3313]

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

[@waynehendricks1529]

Awesome info mate

[@MissLysreign]

Super interesting and helpful, thank you!

[@WebDevSimplified]

Glad you enjoyed it!

[@codingjitsu]

Great VIdeo as always.

[@TheThepusherman7]

Fantastic video!

[@usama57926]

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

[@WebDevSimplified]

Thank you! I am glad you liked it.

[@MrMelquize]

Thanks, nice content!

[@SimplifiedOfficial]

Great Video!

[@developerhabits]

Great video!

[@b3hr4d]

Really helpful tips, can you make video about svg and canvas animation performance ?

[@12thevil]

Thank you

[@hameem6845]

Man you REALLY know your shit. Very informative. Thanks a lot

[@crackribswithdante7807]

That sound at 8:19, I thought my computer speakers just exploded or something Great video though

[@sanskaarpatni9137]

that tch sound that happened at 7 57 and one more timee Damn scary shit

[@foxjonesofficial]

Weird

[@IdleAtre]

Very good video, thanks.

[@WebDevSimplified]

You are very welcome!

[@mohamedyoussef8835]

Awesome Tutorial ++++++++++++ thank you 😃

[@rajeevsinxh]

great video :D

[@leopolon]

dear kyle. Any opinions about animating the filter prop? or Color versus filter? ty

[@forhadrh]

Great! 👍

[@rameezroot5225]

Awesome ☺️

[@pushpakrai5303]

Best video. And best channel 😍

[@metanevis]

awesome content

[@girizhh]

where did u host ur html file? And did u coded it or wordpress?

[@crazycode2578]

Oh my god, That is reason why my side-bar is broken. Thank you so much!

[@joe5head]

what if you duplicate and overlap your whole sites dom layout with different layers of colours and then just modify the opacity on hover to 'change' the colour? like having a blue navbar on top of an orange navbar and then on hover make the blue navbar transparent

[@usama57926]

Please make more videos like this one..............

[@ayushk729]

Is position property good for animations or it makes the animation sluggish like the margin property does??

[@calmniverse9941]

Good explanation. I think there is a website which list all the css properties and the side effects they generate when changed. let me know if anybody remember it.

[@ReactWithMasoud]

I also have a programming channel, but you are doing great and really enjoyed watching your videos. I wish you could give me some tips how to make my channel better because my retention rate is below 15% in average for all my videos...

[@buckschneider7973]

What about left or right property?

[@nithinkottary9578]

nice video

[@ridl27]

ty.

[@code.cracking]

Dear Kyle, thanks for providing such a great content, Do you have a udemy course?

[@paulzwecker9252]

Hi Kyle! I've watched a lot of your videos and built an application i would like to deploy. I've heard you recommending heroku but i'm struggling a lot. Could you maybe make a tutorial, in which you launch an application using node/express/mysql/external api's/Mongodb etc.? Deploying the code itself is not the problem, what gives me headache is all the stuff that's linked to it :D Thank you for making all these helpful videos and keep up the good work!

[@nsharma4981]

Watch the setup video in the Full stack Mybrary app playlist from this channel, I think that might be exactly what you're looking for

[@AbhishekKumar-vo7wr]

Please do a video on Async.autoinject

[@AwsmBuff]

8:19 That sound really shocked me O.o

[@sajTempler]

I think you could do translate3d for hardware acceleration

[@YuriLifeLove]

I try to record and there's some rendering going on, then I try the paint flashing thingy and owh... It's the .gif

[@VANTABL4CK]

Make a tutorial on particles.js please

[@hachaluwami]

transform and opacity is the first css animation😁😋😛

[@vinterbjork4128]

Are you sure that there is not a difference even on your computer in the beginning? The margin animation looks unclear and relativly choppy, the transform one looks more smoother, the text is more crisp. Seems to change even before you reload the page, but I assume your VS code updates the css when you save?

[@win_ini]

you make making a calculator seem like cake, even if the video is 40+ minutes long

[@win_ini]

next time please make a tutorial on how to make a fake command line in javascript

[@LemonDust13]

Like the slogan: "No Stack to Full Stack" 😂 but P.S. - would've probably been best to not have the moving text up the whole time you were tryin to do the intro because I could barely focus on what you were saying, and I don't even have A.D.D. or anything. That being said, very informative & exactly the kind of video I was looking for.

[@RyanFaeScotland]

Haha, was thinking the same thing! Started getting motion sickness half way through, was almost relieved for the ad break!

[@destroreact5706]

So, no rainbow colored websites if I want performance? :(

[@akhilbandari]

I didn't even knew these things existed lol

[@usama57926]

please create a tutorail on *Next.js*

[@jeremyashcraft2053]

Wait do people actually animate using margin?

[@sanket6023]

I have never used margin to animate😂😂😂 idk y would anyone would use it.....

[@Al_Gonzo]

Yes, I did. And Sanket, why would that be so hard to understand lol? What is your first thought when you want to move a div to a certain location? Because mine is margin.

[@nilpo]

@@Al_Gonzo when I move something, I change its position. That's what top, bottom, left, and right are for. Margins cause all kinds of things to recalculate.

[@cyber_chris]

if the proportions need to be recalculated, transition wouldn't work, that's also the reason why it has a heavier cpu usage

[@taylorremigi6238]

Now I need a tutorial on how to animate the content of an h2 tag that changes via useState every few seconds. I can’t get any of the react-transition-group API’s to do anything!!!

[@Ryzza5]

So animating margins is like opening a complex Word document and holding down the Enter key in the middle of the doc - everything below has to push down. And animating translate is like dragging a textbox around with layout options set to just sit on top of anything else without moving it around.

[@WebDevSimplified]

That is a great analogy

[@seshankkm5202]

hi kyle can u make a course on sass

[@WebDevSimplified]

That is something I have on my list of potential upcoming courses. I am focusing on JavaScript right now, though.

[@luckyvanilla388]

How about transition?

[@aglowkeys]

Loved the video, thanks! Didn't know about those testing tools. Here's more reading material if anyone's interested: developers.google.com/web/fundamentals/performance/rendering

[@sparshgupta8078]

use transform instead of top left 🤔top left got painted lately as compared to transform

[@govindsinghrathore4671]

DONE

[@michaelwu1996]

If someone want to learn more about, here is a list of the css property's triggers csstriggers.com

[@KlethonioFerreira]

You didn't mention the downsides of using translate. (I don't know if there is any!)

[@forhadrh]

Kyle, why don't you give visitor the opportunity to leave comment in your blog? That would be nice.. you know :) I love commenting 😁👌

[@avi12]

Kyle, that's not the whole story If you do: position: relative; And animate "top", it will act like "translateY" but perform like "margin-top"

[@gabrielv1856]

So if you use position: absolute and animate top it will act and perform like translateY ?

[@avi12]

​@@gabrielv1856 I'm saying "act" as to how Kyle defined the movement itself "translate" will move the HTML element without affecting the other elements "top"/"left" will also do that "margin" will move the element while affecting the other elements However, when it comes to performance, for some reason, "translate" will be lightweight, whereas "top"/"left" and "margin" will be heavyweight

[@adrymuffin]

I'm in love with you

[@jggabayno]

@14 comments from philippines!

[@Owen-by7db]

I now a css learner

[@ujjwalpandey4721]

A simplified video on c++ pointers, please. These pointers confuse thousands of people.

[@venkatesh2788]

Please make how to download KZbin video using JavaScript or node js Please.........

[@tilakmadichettitheappdeveloper]

Like if u agree 90% of you who have been doing web dev for more than 3 years never clicked on performance tab

[@trancelated]

Meanwhile firefox users be like: 🤨🤔🤯😵

[@AbhinavKulshreshtha]

Why, ff also has similar performance monitoring tool. Infact, only benifit of chrome dev tools is its debug protocol integration. Other than that, ff dev tools is actually better.

[@trancelated]

@@AbhinavKulshreshtha few features mentioned in this video are not available natively in firefox

[@Al_Gonzo]

@@trancelated Like what exactly?

[@trancelated]

@@Al_Gonzo From top of my head, CPU throttling, segregated performance summary, detailed performance monitoring are missing from Firefox

[@Al_Gonzo]

@@trancelated so you never used Firefox?

[@rameezroot5225]

Hey Kyle Give me A Heart ☺️🤭😁

[@WebDevSimplified]

Only because you asked nicely.

[@gokulapriyan7851]

I am from tamil nadu...my favourite teacher on KZbin is Kyle ...soon i will become the CEO of google and then meet Kyle😉😉

[@sidheshwartiwari9834]

Finish your CSS , Google is waiting eagerly for a CEO who knows CSS

[@user121304]

@@sidheshwartiwari9834 lol ! Good one!

[@adityasingh0117]

CAN I GET A ❤

[@chandrakant6283]

Basically don't go Fortnite all over the layout, just use Opacity & Translate.

[@swapnilkuwar7040]

Second comment

[@godisgreatagu]

first to comment

[@philome4811]

The video starts right off with accusations.. I plead guilty :(

[@mascatrails661]

I had to scroll away from the video. Couldn't keep watching the layout bouncing up and down.

[@rishisid]

I BET KYLE WILL NOT GIVE A HEART TO ME

[@888ian2]

Hope he doesn't lol

[@abe10]

@@888ian2 lol

[@WebDevSimplified]

Looks like you bet right :P

[@nijinnazar4760]

It is just annoying to look at that animation, moving up and down...

[@daheck81]

This should be basic knowledge if you do CSS animations in general to be honest.

[@realsolo5569]

Wan!!! wowwwwww my daddd sell out ? sure wiehle avenue dunwoodyy no ride buses pursuit of happinsess #lgcay thrash me James thrash thrasers left dererpartures boarding passes international traffic turing test!!! expand zeh airport now!!!! we need it here to savannah rip zeh runway coffee county fashion week mörp /dev/null

[@vertigo1196]

Lmao I just set my cpu to 6 throttle and its lagging so much this comment will prob be posted in 5 years

[@igorpi25]

Please, stop "moving text" on the half of screen when you explain code. It extremely annoying