Learn CSS Animations In 20 Minutes - For Beginners

🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Discord - / discord
Source files github.com/RamziBach/Learn-CS...
Animations inspired by animate.style/
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.

[@slayingthedragon]

🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨

[@fernandoboschiero1178]

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

[@slayingthedragon]

Thank you so much ☺️❤️❤️

[@NeoCoderNet]

CSS 3d rotate card. Along with Source Codes😁 kzbin.info_HSut9_E_fc?feature=share

[@top10youtubevideos64]

How was your journey. I hope you are a full stack developer by now. Please share your experience. Thank You

[@amadbutt2874]

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

[@slayingthedragon]

Thank you very much !! 😊

[@qaushain]

So true

[@5464654135756]

I’m of the same mind. I could already tell from the beginning. No promenade and only content you need to know 😮

[@vivu9459]

It’s true

[@StarHive5]

🎉HE DID🎉🎉😊

[@johnramos7761]

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

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

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

[@adeptusxiao02]

Why did i see this only now when school is over😢😂

[@My3dstudio686]

Same

[@Kyakarega_janke]

Same...

[@chehi5624]

Fr

[@Speedytransloop_Inc]

Even when school is over never stop learning, You can supplement on what u gat to go bigger than your college colleagues 😅

[@adeptusxiao02]

@@Speedytransloop_Inc we use java🫠

[@soundtrickz]

Man, you deserve every flowers you get. Your explanations and details are accurate and concise. Top quality content 👏🏽 👏🏽

[@bartheus6709]

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

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

[@CaioCromos]

thats what i call a high quality tutorial. really excited to try all this!

[@Uzair57]

I am so confused about why this content is free, literally you can show me your 2 videos and after looking at your style of teaching and explaining. I will literally pay to get more content. This is amazing and I will definitely share your channel to all my fellow web developers

[@ethiopiamezmurchannel]

We know peoples like you change kind person to be selfish😢😢

[@underconstructionpersonalt725]

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.

[@user-gt2tl9qw2f]

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

[@Mridul_Paul]

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

[@ogeochife2443]

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

[@thuanh9247]

Big respect for you from Vietnam 🎉. I am starting my first web-based application for school prj and your channel arrived just in time ❤

[@francisnjugunaldc]

I dont know why, but i have already watched every video in this channel, i feel like he is always talking to me, great content

[@slayingthedragon]

Much love ❤️

[@m.m4051]

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 🙏

[@user-mf7xy4hn5d]

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!

[@avrakadavra1552]

Damn, I'm always replaying this because of how concise it is and realizing I didn't yet like the video... Thank you for this

[@2010daigo1]

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

[@slayingthedragon]

Thank you ☺️

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

[@slayingthedragon]

Thanks 😊

[@sufyanakbar7153]

Where were you all my life. This is gold

[@microsurf128]

Brilliant lesson, without all the "blab blab blab" that others do! - Thank you that was great!

[@AltBox4]

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

[@user-ol4ss4wm1d]

You are amazing, man! Thank you for sharing your outstanding talents with us. You’re a great instructor! Keep it up.

[@codewithabdo7790]

You are really slaying the dragon , clean , clear , enlightening

[@developer_014]

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

[@octotube463]

This video was really good; it was concise and complete

[@BindomCongat2]

20 minutes, but it take me 5 hours to complete, what the hell?

[@UchennaChimaobi]

You probably doing animation for the first time, this guy must have coding for years

[@bhanupriyasd1899]

Exactly

[@ChroniclesChro]

😂😂😂, I was thinking am the only one... don't worry we will get there

[@TimGavin]

Spent several hours today trying to figure out how to do a bounce transition and you covered it beautifully in 2 minutes lol

[@NeoCoderNet]

CSS 3d rotate card. Along with Source Codes😁 kzbin.info_HSut9_E_fc?feature=share

[@Nutts2Butts]

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!

[@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 ❤️💯

[@slayingthedragon]

Thank you ❤❤❤

[@mrashad_com]

Thank you very much for this grate video, Finally I understand CSS animation and how to use it

[@SeriousSnake]

Bro, this helped me so much. Using the keyframe knowledge with the little knowledge I have, I made some epic animations!

[@anushkasingh9470]

Thank you so much! I have learnt so many CSS concepts through your videos. Always concise with such clear examples. Keep posting frontend stuff!💥🤟

[@dalan9034]

Your lessons make it so much easier to understand, while also making sure we put our own work into it (for beginners like myself)! this is the second video of yours that I watched and it's so enjoyable! it's especially good if you forget what you just learned and need to refresh your memory, while also learning new things? anyways, thank you a lot :)

[@isabellexavier5458]

I've never seen such a good quality at teaching. Thank you very much for the content!

[@NeoCoderNet]

CSS 3d rotate card. Along with Source Codes😁 kzbin.info_HSut9_E_fc?feature=share

[@DenzelBraithwaite]

awesome, just helped me make a card "slide in" animation when the player gets a new card ;) really appreciate it

[@JoSanInk]

this was the shortest 20 min video i ever watched. great content.

[@putudharma4352]

Wow dude, your teaching method is really work for me. Been watching countless tutorial, your one is the easiest to uderstand so far. Auto sub!

[@HornAmiir]

This channel is really a masterpiece ❤❤❤❤ never stop the golden job you have for us 🎉

[@ClayAsbury122]

Thank you. This and your flexbox video are the clearest and most concise explanations I’ve ever come across.

[@NeoCoderNet]

CSS 3d rotate card. Along with Source Codes😁 kzbin.info_HSut9_E_fc?feature=share

[@osamugaming1807]

one of the best tutorial for beginners like me, you explain every details for me thank you dude.

[@gildacles1238]

So far, you make the best webdev tutorials I have ever seen. Its made for people escaping tutorial hell.

[@NeoCoderNet]

CSS 3d rotate card. Along with Source Codes😁 kzbin.info_HSut9_E_fc?feature=share

[@360Benefit]

In four words YOU ARE A TUTOR, bravo!!

[@MilanGurung-oz5co]

one of the best animation tutorial video.

[@Filaxsan]

Another banger! Great job brother 💪

[@oussamareghay7081]

thanks for the nice and clean tutorial !

[@mimcris8481]

One of the best CSS contents on KZbin!

[@sanarahman6996]

The reusability concept was awesomee.....Great work ..thanks alot

[@army9700]

Fantastic tutorial. keep up the awesome work

[@rameenana]

Thanks man. This was really helpful.

[@prasadsainavarapu4376]

excellent video man!! thanks for the help.

[@elguacam0le]

The best video about CSS animations. Thank's !

[@codebreaker8928]

You and your videos r goat They r great to learn and revise since they r simple and short

[@flo8903YT]

BEster mann, ich schwöre du hast mein leben gerettet brudi. Ich kann dir nicht genug danken! 👍👍

[@IrfanShaikh-br9ie]

I never thought it would be so easy.This is the only channel where i can learn complex css in a very easy way with simple examples hats off man i am never gonna unsubscribed you . 🙌😊

[@slayingthedragon]

❤️❤️❤️❤️❤️❤️

[@NeoCoderNet]

CSS 3d rotate card. Along with Source Codes😁 kzbin.info_HSut9_E_fc?feature=share

[@KyrylWins]

bro u are literally God of an explenation. I am amazaed and satisfied thanks

[@sofianey3490]

Thank you, very comprehensive. You helped me improve my website project

[@alexanderpineda9068]

Great job, bro, It was very helpful for me! 🙌🏻

[@FMNathan999]

Thanks man, did you help me so much, I'm beginner on HTML and CSS, your video is amazing.

[@skunkml2449]

You nailed it bro! Really great content.

[@orlamdc]

Fantastic! Thank you

[@Fact-Explorer-Logan]

Great tutorial, thank you so much this is what I need for our project

[@hasnaat-du4ft]

I have found plenty of good KZbin educators, but your channel has by far been the most enlightening.

[@iamagamer4413]

Finally a KZbinr that asks you to like and subscribe correctly

[@user-qm8zd2ks5s]

Thanks bro really enjoyed watching it

[@Ilioski17]

Much better explaining than university professors, great job

[@ch4gga]

This was amazing! Thank you!

[@sabonacio]

man you really made it easy Salutes from Portugal.

[@MattBiddick]

By far the best CCS explanations I’ve seen. I know these must take a lot of effort to make. Keep it up!

[@NeoCoderNet]

CSS 3d rotate card. Along with Source Codes😁 kzbin.info_HSut9_E_fc?feature=share

[@chanathipmorths7323]

Thank you for such an amazing video. Liked and subbed!

[@go_better]

Thank you so much! This is amazing!

[@StylishBanditSlayerS]

Thank You So Much For All!!! this is so helpful for us. Thank You So Much!!!!!

[@insidiousballer5775]

Bravo, bien hecho!

[@hehswhs1207]

brother loved it .. Thank you so much ♥

[@snuw]

great visuals, narrative and explanation. thanks sir.

[@SamuelJBai]

Thank you for the amazing content!!!

[@adithyang6672]

Wow man evrything is soo clear and precise

[@sweatypotato248]

Omg, what gem of channel, Thankyou

[@cocgamerzs5049]

Man! You are awesome 👍👍👍 Your way of talking and politeness are incredibly amazing 🤩🤩🤩 Just love it broo!!!!!

[@taherariwala4055]

Im not a beginner to CSS animation, but i did learn new things, thanks.

[@user-xj7bg2ev1r]

thank you so much this really helped with my final project

[@coil8906]

naw dawg, imma like this and comment to help your algo in any way I can. you gotta blow up on here, I and many others NEED this level of quality content. please continue what you're doing, big fan of the aesthetic and presentation format. you're gonna be huge on here in the near future I just know it

[@slayingthedragon]

Thankkkk you very much, I really appreciate it 💯💯 😁

[@shahidvohra2239]

The way of explaining is very good

[@codingwithk2.085]

Tysm, I can make my website with proud now!

[@Dakar4]

Crazy content. Thanks and congrats.

[@BarthroSwieshco]

You're saving my lazy ass.... Thank you and God bless🙏🙏🙏

[@darkvador2014]

Thank you for the explanations

[@Cutseen3]

I saw the first 10s of this video and decided subscribe. Bro this is very good!

[@sachingyandeogaikwad6278]

Great Sir.... Its so real expeience i feel like i am sitting in calss room . **i wantched video at 0.75 speed.

[@artemisfowl9002]

dude.. you're a fuckin CSS GOD! i'm literally blown away by your knowledge and style of teaching, its almost scary how good you are

[@slayingthedragon]

Haha thank you ❤️

[@alaashakir178]

Love this powerful tutorial ❤

[@damianbix7]

Thanks man this is helpful👍👍

[@padmasekharpottepalem8172]

Excellent explanation. Thank you so much...

[@AbdullahRady]

That's amazing! and direct to the point!! Thaanks boss!!

[@johnjenks]

Your content is amazing m8 please keep making it.