Learn CSS Animation In 15 Minutes

🚨 IMPORTANT:
Free CSS Selector Cheat Sheet: webdevsimplified.com/specific...
Learn CSS Today Course: courses.webdevsimplified.com/...
CSS animations are complex. There are so many properties to control an animation and on top of that there are two different ways to write animations in CSS. In this video I will be walking through both transition and keyframe based CSS animations. By the end of this video you will understand everything you need to know about CSS animations.
📚 Materials/References:
CSS Animation Performance Video: • How To Create Performa...
🧠 Concepts Covered:
- How to write transition CSS animations
- How to write keyframe CSS animations
- How all animation properties work
- CSS animation best practices
🌎 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
01:22 - Transition Property
06:20 - Animation Property
#CSSAnimation #WDS #CSS

[@sakshamchaudhary1608]

His hair are more aligned than my website 😂

[@daansprinkhaan9635]

@EarrapeXD you do you

[@mahmudulhasansakib]

😂😂😂

[@elonmusk501]

@@daansprinkhaan9635 ok I completed your 100 likes.

[@alpeshjoshi8558]

😂🤣

[@codewithdoge]

Yes like they are set to a certain value

[@chunmeishui6431]

This is undoubtedly one of the most straightforward and perfect tutorials to exist! Thanks!

[@kosemekars]

I did not know you can edit the timing in the console. Incredible!

[@AngelOfDeath943]

Me too

[@dv4able]

You mean in devtools? 😏

[@foxjonesofficial]

He means yes but in the console tab

[@jackhuang1828]

@@foxjonesofficial you don't even edit transitions in the console tab...

[@jackhuang1828]

@Big Black Dot. You don't. The console is for JS only, refer to 5:00 where you can see he's not in the console and go try out animation tool yourself like me, you'll see it's not in console.

[@petarkolev6928]

I just love how dead simple are his videos and yet so descriptive and gives you the very info you will ever need

[@knotcircle2844]

Thanks for this awesome tutorial! Marking times of my takeaways here: 3:30 - Why transition property is not put on class like hover 4:00 - Why transition is put on base class not on modified class

[@ajc53]

This tutorial format is great. I wish every tutorial ever made was this efficient. Can't wait for more. Thank you

[@jakebrenneman5132]

YES. THIS.

[@AyyazTech]

Yes I agree

[@nsharma4981]

The in browser bezier curve editor seems pretty useful. Also, the animation-playstate is something I never knew one could control without javascript. Thanks for this video, Kyle! Did not expect to learn much since I use animations quite often, but happy to be proved wrong! Your videos are always such a great value for time! 😄

[@tposell1450]

Diwali animation using html and css kzbin.info/www/bejne/bqmkhpxmit-Gfdk

[@HosamSultan]

Man! Gotta say you're such an inspiration! It's really rare to find someone who really knows how to teach stuff like that. Your videos are usually well structured and you always start from a point where you also know where and how to end it, and when to talk about the very next concept in the line. Your content is lovely, Kyle! Keep it up!

[@ed1nh0]

Dude you nailed it! You deserve all likes and subscrptions. You know how to explain since the simplest to the complex subject.

[@reinhardtbasson4890]

Thanks a lot, really your vids are always just enough info to get you started(curious) on your own journey and that is just what I need. Love the cheat sheet.

[@mauro21523]

Simplified, conceptual and very understable, thank you Kyle!

[@estherinyang4779]

Very awesome tutorial. Thank you for keeping it simple and perfect!

[@AICameron]

This is very well explained Kyle, thanks for all your work. You're really helping me out!

[@franciscomontesgomez2067]

Kyle, well structured and organized explanation, video, and content. Extremely simple and clear explanation. Great job! Thanks!

[@daniel-rrr]

I can't thank you enough for the work you put in... Terrific teaching skills!

[@MaxProgramming]

I am sooo excited! Your speed plus your teaching. I want to create some thing awesome using animations in css but i dont get much ideas

[@sushmithachebolu2995]

Exactly what I needed.❤️loved ur way of explaining things and putting up easy for us to understand..

[@omnihorse7618]

You are an amazing teacher, a breath of fresh air!

[@NLspartan117]

Absolutely insane how well you managed to explain this. Respect

[@sheikhAbdelrahman]

Many thanks Kyle. That was an awesome video. Simple and to the point.

[@josuebarros-desenvolvedorw2490]

This tutorial is GOLD!!! Thanks a lot for sharing!!!

[@haroldcjennettiii]

You're one of the best coding teachers on KZbin.

[@mahmudamahmi]

This guys is awesome. He teaches every bit of it. and clears my concepts about things I don't even know I was confused about! Thank You for this!!!

[@ingridoncken9732]

Thank you so much for the explanation and the cheat-sheet, it's been helping me a lot.

Thanks for this lesson.

[@stresslesswd4184]

Easily one of the best tutorial makers that ive seen. so clear and calm when explaining things with easy to understand explanations and instructions. Keep it up sir

[@albedesigns]

I could fall asleep listening to him because he does speak so calmly. Lol

[@emanuelfaisca1783]

I really enjoy your videos and your style of teaching! Keep up the good work.

[@jamjam3448]

Sooooo usefullll. I never knew about the inbuilt editor in the browser. And so i never used the bezier timing function. Thanks a million, good man.

[@damianocaffa8661]

Loved it. Way better than other video i watched before on the topic!

[@Bee00000]

Thank you for your help! I was stumped on an activity in my class, and this tutorial helped me understand how things worked.

[@guvenfazli]

Very simple and great tutorial. Thanks a lot!

[@ahmedkrdzalic4425]

first 4 minutes are already sooo helpful... thanks a lotttt

[@subhadeepchowdhury5244]

Thanks a lot! You make things really simpler.

[@firedforfighting]

Like Ashanti and Jarule....Kyle is always on time!!....I always forget this and finally a 15 minute vid to serve as a refresher!!!

[@shrirambalaji2109]

Thank you...you made this really easy to understand

[@inertingd373]

first ever code video I watched, and it was super interesting, and simple to understand, due to your clear explanations/visuals, and adapted speech pace. Thx, keep the good work

[@hassaanrazanow701]

the best video on css animation! great work

[@veronicaciuca1843]

The best video I saw about animations. Thanks a lot!🥰🥰🥰

[@bokimitrovic9269]

Well done man, so well and detailed explained. It's impossible not to understand a thing.

[@jakebrenneman5132]

I've only watched 3:30 of this video and already can tell you are an AWESOME teacher. Connecting things so quickly for me. Thank you! And keep it up!

[@jakebrenneman5132]

Also, I don't think I'm subscribed to more than 2 people IF that.. you get my Subscription because I have a feeling you make a lot of great content, and I hope to dive into it soon!

[@MiSt3300]

I already know about this in css but I just want to clear this up. Thanks so much!

[@bama2619]

Thank you for the cheat-sheet and the job you are doing.

[@Kostrytskyy]

Clean and nice. As always!

[@genjimccorkle5518]

I need to start buying your courses, your explanations are great.

[@Miguelmigs24]

I love how you don't waste time on bs and explain everything quickly and straight to the point.

[@tposell1450]

Diwali animation using html and css kzbin.info/www/bejne/bqmkhpxmit-Gfdk

[@user-cw4mm7ip4h]

I like to watch your videos every time I'd like to understand something quickly. Thank you!

[@aaleex012]

Very straight forwards, thanks!

[@thulierlaurent]

I understood very well animations in CSS now ! :) Thx from Belgium !

[@mohamedhussein9849]

Great video for me as a beginner. Thank you so much.

[@josephlivengood4508]

This makes me what to focus only on front end development.

[@bestcode4321]

It was simple and clear , Thank you

[@thomasdam7438]

love your videos!!! Your explaining so well👍✅

[@adip9213]

The best animation tutorial. Thank-you very much

[@dogethegamer551]

You are one of the best and my favourite programming teachers on KZbin!

[@hojaverde5265]

Great video. Your selector cheat sheet is pure gold! Thanks a lot!

[@WebDevSimplified]

I'm really glad you are enjoying it!

[@jacobr9741]

God bless you. Not only are you a true pleasure to listen to as you are a fountain of knowledge. You've done the topic such justice. thanks so much my friend.

[@SYun-tj2kx]

Really nice cheat sheets. Thanks for making them available.

[@sarowarhosen003]

before I don't know when and where use animation or transition now it's clear to me thank you so much 😊

[@marceloguzman646]

Once in a while I re-watch this video and I remember everything again. ty

[@AyyazTech]

Well, This is one of the best videos that I love. Very easy to understand and follow. Keep it up bro

[@davidrichardson1533]

Fast paced but very clear. Nice work and very helpful!

[@tposell1450]

Diwali animation using html and css kzbin.info/www/bejne/bqmkhpxmit-Gfdk

[@sriram-zn3ic]

Great work dude really wanted this video

[@franklinrodriguez1722]

Great explanation, very professional.

[@sithumdilanga650]

Thanks man. simple and clear

[@13_yashbhanushali40]

Absolutely loved the way he explained Iam from India btw and let me be very honest I loved the way you elaborated everything in very short span of time with every minute detail .. Good work bro

[@kaveengoonawardane9651]

Amazing video. Thanks mate!

[@pedromusic7986]

The best informative video I've seen today! Big up! You're awesome

[@benjiedelaluna162]

I understand more of this video than my teacher thanks man

[@luberalexanderechavarriabe4156]

Thanks a lot for teaching, you are one the best mate.

[@suchetamukherjee3570]

This video has been very helpful. Thanks for sharing.

[@sunnatakhmedov2466]

Bumped into your video, gotta say I liked it! Good job, Kyle! Suscribed.

[@Crystallizer954]

Thanks so much this really helped me out with one of my projects!

[@miabusse7986]

this is a MASTERCLASS 😍 so so easy to understand, even for me as a total noob!

[@MeridaBros]

bro as a person wanting to become a software engineer this definitely helped, also this was very fun and was sad when the video ended. On a side note good luck and hope you get a lot of support! .I liked and subbed

[@paulahauf8228]

Thank you for this awesome tutorial!! :)

[@rauldelacruz8139]

OMG! A curve editor?!? Thank you! Your content is fantastic!

[@theproactivemindset]

Thanks for the Cheat Sheet, it's great!👍

[@stacydevries4241]

Very good presentation, especially when showing how to do these animations in the HTML. Although I cannot get everything right and working, it was still very worth the time coding along because of the material that I did learn. Probably my syntax error is holding me back from rendering all the visuals that this fine fellow did. Thank you.

[@arturluckyanenko32]

Thank you a lot. So now I can use CSS animation. It helped a lot to understand CSS animation

[@rimoros.1020]

Thank you! I was a bit intimidated since I thought it would be very hard to use this but you explained the animation bit very well

[@carnaticduo869]

This is what a perfect tutorial is.... Thank you very much!!

[@upierczileonheart7020]

Thank you for this tutorial, it really helped

[@user-tg1xx9qj2l]

this is the most easiest tutorials I have every seen. thank you so much

[@LtTheXamax]

Thank you for this amazing tut. lov u

[@muzzammilsajid]

Thank you so much! You helped me a lot.

[@Owolabijunior]

This is simple to understand, i have been watching a lot tutorial but the is perfect for me... Thanks for Sharing your knowledge

[@MelonPower]

thanks kyle! really clear !!

[@MrLordSeong]

I honestly felt no way... just another do this in 15min video clickbait. MATE THIS IS SIMPLIFIED. I LOVE YOU.

[@DShazin]

absolutely amazing vid!

[@kimuelanqui467]

Thank you for the cheat sheet

[@omegamotivation144]

Great video, you are on of the best teachers ever.

[@maskman4821]

yeah, for sure, Kyle is one of the best instructor focuing on fundamental !!!

[@RayquanRogers]

This is your first video I ever came across, and my high ass was just absolutely fascinated by the way you explained everything (and your hair too LOL) 😁💯

[@niranjantamhane3602]

Perfect beginning for CSS animation learning

[@simonryckelynck8246]

This content is awesome! Thank you!

[@maksime833]

Great video! Thanks a lot!

[@johnkula5168]

Very useful video. Thank you so much.

[@antoineassaf7508]

I love this. I feel like an animation master rn.

[@ArnoVicD]

Ok... I came across your channel today and i guess i love it. And i am sticking here from now😁

[@StephenRayner]

You never disappoint!

[@evaneself]

Bravo! Thank you, Master!