The tips on Javascript using ms and the CPU/GPU strain of certain animations is gold. Thank you!

Finally! I have understand the difference between all these 'ease' transitions! Thank you, Kevin!

For a while, I've been so confused when to use keyframes and transitions, but thanks for this! Finally, I understood it so much better! "Transitions require a trigger to run. The trigger may be one of the events listed in the last section or it might be JavaScript, but the transition needs something outside itself to start. CSS animations don’t need a trigger. They can respond to a trigger, but one isn’t needed to start the animation. Animations can run automatically when the page first loads. If you need your elements to change or move automatically, you have only one choice: animations. Transitions are limited to an initial and final state. Animations can include as many intermediate states (keyframes) as desired in between the initial and final states. This gives you more control over CSS animations and lets you create more complex animations. Transitions work better for simpler animations. Transitions can’t change CSS properties. You set the property values on a selector and perhaps the selector’s :hover state. The transition defines how the change occurs, but not the specific start and end values. Animations, on the other hand, can change property values inside their keyframes. The property values don’t even need to exist outside of the animation keyframes. This makes animation far more dynamic and flexible than transitions. Transitions can’t loop. They run when triggered and then run in reverse when the trigger is removed. Animations can loop as many times as you want. They can run forward or in reverse, or they can alternate between the two. Once again, CSS animations offer more refined control. I’m probably making it sound as though you should always choose animations. Transitions have their good side, too. Transitions are typically easier and quicker to work with. This is especially true if you use JavaScript to give yourself a little more control. For example, it’s easier for JavaScript to make changes to intrinsic property values than to property values inside animation keyframes. As a general rule, you’ll write more code using CSS animations than you will using CSS transitions, assuming both are attempting to do the same thing. However, if you find yourself writing the same transition code over and over, you might want rewrite it as a single keyframe animation that can be easily added to a number of different elements."

I used transitions for quite a long time now, but as they say:"Every Day You Learn Something New". Thank you for teaching me cubic-bezier and transition-delay. Together this your Video "::before and ::after" (Part 2) I replaced a JavaScript function with CSS only. Keep making such great videos!

oh c'mon, with such a great content you're forcing me to click that thumbs up button on every video you upload by now.

Just great. You're my mentor in CSS. Humble, kind and the stuff. Thanks Kevin.

For a junior full-stack dev I found your videos very useful. You are explaining new concepts really well. Keep up the good work

Although It's been like 3 years since this video was released, but because of you, I have found a treasure chest in my browser's dev tools (yes I was talking about that curve thingy). Thank you :)

This is the first time I am seeing this cubic-bezier value...It's so helpfull and fun to play with. Thank you!

Especially appreciate the insight into CPU/GPU usage. Some of us (ahem*me*ahem) like to, as someone said in this video, animate everything. I"m also learning a lot about the inspector in Chrome; so much I didn't realize I was missing.

Kevin's channel and webdevsimplified are the absolute best!

Its my first time playing with transitions and you help me a lot, thank!

kevin powell was the name of one of my hockey heroes when i was a kid. great videos!

KEVIN !!!!!!! This simple and clear break down was so good! I just started trying to learn css two days ago. Your simple breakdown really help me get a good understanding. Thank you! Do you have something like this for css grid/and or positioning? I really appreciate this tutorial!

Thank you so much for this! I really hope you make some backend related videos as well, like PHP, Laravel etc. You make it really easy to understand things.

Thankyou Kevin for the clear explanation!. For everyone who wants to remember the transition-timing-function (6:44) I thought about the following: The subject is your home just remember around the house u are quick when leaving u are in hurry, When arriving back home u are late so running in the home also. This makes the values mean: Ease-in = u start walking slowly but when u arrive u race inside. Ease-out = u leave the house in a hurry; running and then continue walking slowly. Ease-in-out = combine above! (the home is the running part again). Just like the mailmen that approach the house with the mean guard dogs; u walk slowly run to that house and run away to walk slowly again. Linear = without a house. Just a slow and steady walk true town.

One of the Gems I watch everyday

Just like the amp/filter envelopes on a synthesizer... If you're a musician, you'll already understand it. For me, this was a bonus!

Best tutorial I found on CSS transitions.

Transition-timing-function example was fun.

Jesus, even when I'm seeing a random css video I realize that it is a video made by Kevin Powell!! Lol. Good job! Tks.

Fantastic! i learned keyframing, but more and more i stood up on transitions, by looking in sample projects exc~ "study on freecodecamp, and they discovered more keyframing for me, then transitions" and i was like.. wow... aniway long story short: i typed in my search :: Transition Kevin powell. and yep you got it! Your'e my favorite teacher!!!!! And thnx! i just learned the basics, no wait the whole subject in 17minutes! Your'e to good for this world!!!! stay following you.

Excellent video, thank you from Brazil!!!

amazing job man! You should be a milioner with this quality of content xD

Great Content Kevin... Well detailed and crisp explanations.

love you man your amazing you fixed something I was scratching my head on for quiet some while

Thank you for this general understanding, it is helpful for beginners.

What should I say..!? Simple Awesome..! Really thanks to you..to share your videos..! The King of code..! And great person you are..!

Exellent tutorial sir ! thanks for these amazing knowledgeable tutorials.:)

awesome tutorial and i cracked up when you repeated your outro lol. leaving a like and sub

Very interesting video Kevin, addressing some points few people talk about. Thank you!

this man a true legend and a great techer

Thank you so much for this vidoe! Helpful and fun!

Thanks for your time Kevin.Very good tutorial.

HTML and CSS are now the food I eat. I'm a beginner

great pen on the timing-function, very illustrative 👍

This was super informative, thank you so much!

Great video man, you've earned a subscriber!

hey Mr. Genius i proud of u and God bless u

Awesome. this my first time know about cubic-value in Chrome and about "all" and performance. great content as usual. plz try to make a video about transform

You deserve my subscription

Thank you, Kevin!

Awesome video. Thank you for sharing

Nice presentation! Thanks.

oh. didn't know about "all" causing a performance hit. i, stupidly, assumed the engine would see the other properties aren't changing and no bother with those properties. good to know. ty.

Dman useful , great work and thank u , Kevin!

I´m transitioning on web developer with this content =D

Thanks for the video Kevin

Thank you for making such well made and helpful videos

Amazing, thank you so much!

Wow, the best explanation !! love your channel

I subscribed to uuu.... wooow this video is suuuuuuuper helpful and u definately know the stuff you are talking about!!!!

Nice tutorial! I love CSS transitions.

4:37 Why explicitly defining transition-property is encouraged

thank you for this great video

Great overview. Thanks!

THIS IS SO COOL!!! Thank you!

Computers are the greatest humanity achievement yet, and Kevin you are an awesome instructor! I hope a day comes that greedy and stupid politician are being replaced with artist and creators and scientist.

great video! thanks a lot

best tutorial thankyou sir

Great explanation

This video is great :D Thank you!

Helpful, Thankies!!

Very helpful ! Thanks a lot

Awesome video 👌. Thank you

Great physical presentation.

great video, thanks

Kevin, please, could you make a video on css perspective and mix-blend-mode properties? That would be great

thanks a lot buddy

amazing video, very informative...

Cool! Thanx, dude!

I'm doing a translateX on an image and an h1 next to the image. I'm using 2000ms and it looks good.

thanks, very helpful

Thanks for the content

I wish he was my css teacher... THUMBS UP

Very useful. Thank you

the first 2 minutes helped me honestly so annoyed it was that easy to pull of what i wanted.

Thanks 👍🙏

Amazing, thank you. I suscribe.

thanks Kevin

great job !

Good video, I know it’s old but I am learning from It thank you

Good delivery.

Thank You Kevin

Wonderful - thank you.

Great content! Thanks Man!

Thank you Kevin

very nice content love from india

Would it be fair to generalize by saying that 'transform' defines _what_ you will be animating and 'transition' defines _how_ it will be animated (in other words, the properties of the animation itself) ?

Hey, Can you tell me, what is the best approach to have responsiveness in terms of feasibility, smoothness and cost of execution, with CSS media queries or java script? I am currently using CSS media queries to hide and unhide elements at different widths ( like changing a div options component to a menu component ), there are a few libraries in react like react-responsive that use HOOKS but where I'm working, I for some reason cannot use hooks.. I can for sure use event handlers and get window width from JS but react rendering is done with every prop/state change (here state could be window width for responsiveness and yes I am using react..) .., I need to make page responsive, which I can via CSS, but when it comes to component level like i have 5 react components which are on different repository I donot have access to.. how can I let them know it's a max-width change and define what they gotta behave as? My question I don't really think is clear.. incase you get it its good, else please let me know, I'll explain further.. Also I love your videos, I have worked on devops, but your video got me interested in CSS so much. It's do powerful only of people knew.. Regards :)

In my vs code transition-property does't know about transform what should i do? It can accept all but does't apply transform

Thanks, very helpful.

Thank You Sir❤

Amazing video I love it : )

the man!

how did u get your transitions to play simultaneously? I have some that I add/remove a class from with js, but they keep playing in sequence.

Cool animation!

This is so addictive....

You're a legend.

Helpful video.👍👍👍👍