Learn CSS Animations In 20 Minutes - For Beginners

0:00 Intro
1:15 Transitions
4:28 Animations

There are 2 ways of creating animations in CSS: Transitions.. And animations.

Transitions wait until a change in a property occurs and then allows those changes to take place over time. Without a transition, any changes in a property would take effect immediately. Transitions should be used when properties are changed interactively so for example, in CSS, a property can change when hovered on and when focused on.

Animations however, provide keyframes for more control over the animation and allows us to create complex animations on a frame by frame basis. Use animations when you want to create complex animations that just work without having to wait for properties that change interactively.

[fernandoboschiero]

Dude. I just started studying HTML/CSS a week ago and I have found plenty of good Youtube educators, but your channel has by far been the most enlightening. Thanks for the content!

[waylandmayo]

Your ability to smoothly communicate and pass on a high level of understanding is to be commended. Great job, can't wait to see what you do next.

[johnramos]

Don't stop creating this kind of videos, they are superb: short, concise,  and complete. Congrats!

[bartheus]

The way u explaining all step by step then refactoring it to how it at the end can look like is a god damn good job ! GREAT WORK !!!

[remikuraa]

Probably the cleanest tutorial I've ever seen, it's compact, short and well-paced to the point that it feels like the information just migrates into my head with no issue. As someone with a slight disadvantage in learning and thhe need to know why things work the way they do, I recommend this to literally everyone no matter their skill level and learning process. Absolutely legendary, and I sincerely hope I learn more from you just as well as today! Wish the best for you

10/10 tutorial! (and the kind of tutorial that doesn't lay down a red carpet straight to tutorial hell lol)

[GuillermoArellano]

This video did a much better job of explaining the concepts than other videos that claim higher upvotes and subscribers. This is a gem! Highly recommended!

[RoccoBronson]

Your channel is pure gold. Don't ever stop putting out videos. You are destined to millions of subs, you deserve it.

[Mridul_Paul]

great content...covered the topic effortlessly without over-explaining.. loved it❤

[underconstructionpersonalt]

Yes your videos a legit dude. It´s awesome how much effort you put into it to provide us with the very essence of the lectures. I will definitely support you.

[daigo]

Your production quality is good enough to deserve 100x more subscribers

[AltBox]

Best introduction to keyframes on youtube and animations. Liked, commented, subscribed!

[m.m]

i love how straightforward this is! you made it look so easy, i'm so excited to apply this to my practice project. thank you 🙏

[developer_]

Great content, and what i really loved was ur simplicity!!

[mfxyhnd]

Wow dude, what a awesome video! I was looking for a simple and clear tutorial and i found even more here! Thank you so much, awesome content!

[ogeochife]

i love how detailed your videos are, you just got one more subscriber

[pranavdcpatil]

What the? This is so Amazing... Never had seen something like this so smooth regarding css animation tutorials... Thanks a bunch bruh... It was very insightful and helpful. Just subbed ❤️💯

[NeverEvi]

I was watching this as a review, but was really excited to learn that keyframe percentages don't have to be in order like that! Thanks for the info, and great video!

[amad.]

great content, you will blow up soon if you keep posting high-quality content like this. really appreciate the effort gone into your videos

[gttlqwf]

seriously i never seen someone explaining like this. thank you 🤩

[NuttsButts]

I am really not sure what it is but your videos just make the most sense to me. I have a hard time following others on their videos. Youre so concise and seamless. Keep doing this its helping me learn so much about how to make my websites look awesome!