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.

Пікірлер: 655

  • @slayingthedragon
    @slayingthedragon9 ай бұрын

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

  • @fernandoboschiero1178
    @fernandoboschiero1178 Жыл бұрын

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

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you so much ☺️❤️❤️

  • @NeoCoderNet

    @NeoCoderNet

    8 ай бұрын

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

  • @top10youtubevideos64

    @top10youtubevideos64

    Ай бұрын

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

  • @waylandmayo
    @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.

  • @soundtrickz
    @soundtrickz10 ай бұрын

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

  • @bartheus6709
    @bartheus670911 ай бұрын

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

  • @johnramos7761
    @johnramos776110 ай бұрын

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

  • @lgs_ae

    @lgs_ae

    21 күн бұрын

    21 minutes and 22 seconds is not short…

  • @GuillermoArellano
    @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
    @RoccoBronson6 ай бұрын

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

  • @remikuraa
    @remikuraa3 ай бұрын

    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)

  • @runyagwavava4930

    @runyagwavava4930

    8 күн бұрын

    I agree. this is wholesome content .

  • @amadbutt2874
    @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

    @slayingthedragon

    Жыл бұрын

    Thank you very much !! 😊

  • @qaushain

    @qaushain

    Жыл бұрын

    So true

  • @5464654135756

    @5464654135756

    Жыл бұрын

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

  • @vivu9459

    @vivu9459

    10 ай бұрын

    It’s true

  • @StarHive5

    @StarHive5

    10 ай бұрын

    🎉HE DID🎉🎉😊

  • @2010daigo1
    @2010daigo1 Жыл бұрын

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

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you ☺️

  • @sufyanakbar7153
    @sufyanakbar71536 ай бұрын

    Where were you all my life. This is gold

  • @user-gt2tl9qw2f
    @user-gt2tl9qw2f11 ай бұрын

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

  • @AltBox4
    @AltBox411 ай бұрын

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

  • @Mridul_Paul
    @Mridul_Paul8 ай бұрын

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

  • @underconstructionpersonalt725
    @underconstructionpersonalt7255 ай бұрын

    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.

  • @ogeochife2443
    @ogeochife24433 ай бұрын

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

  • @developer_014
    @developer_014 Жыл бұрын

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

  • @m.m4051
    @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 🙏

  • @mimcris8481
    @mimcris84816 ай бұрын

    One of the best CSS contents on KZread!

  • @user-mf7xy4hn5d
    @user-mf7xy4hn5d7 ай бұрын

    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!

  • @shahobiddinismoilov
    @shahobiddinismoilov10 күн бұрын

    I found your channel from your flexbox video, now I am addicted to your content and binge-watching all your CSS tutorials. Your explanations are the best I have seen in any CSS tutorial. They're so good

  • @Nutts2Butts
    @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!

  • @CaioCromos
    @CaioCromosАй бұрын

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

  • @user-ol4ss4wm1d
    @user-ol4ss4wm1d8 ай бұрын

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

  • @pranavdcpatil
    @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

    @slayingthedragon

    Жыл бұрын

    Thank you ❤❤❤

  • @codewithabdo7790
    @codewithabdo77903 ай бұрын

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

  • @thuanh9247
    @thuanh92473 ай бұрын

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

  • @NeverEvi
    @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

    @slayingthedragon

    Жыл бұрын

    Thanks 😊

  • @sanarahman6996
    @sanarahman699611 ай бұрын

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

  • @UmerKhalid206
    @UmerKhalid20611 күн бұрын

    Simply Love the way you explained

  • @elguacam0le
    @elguacam0le Жыл бұрын

    The best video about CSS animations. Thank's !

  • @runyagwavava4930
    @runyagwavava49308 күн бұрын

    Man you saved my life. Thank you. The explanation was clear.🤗

  • @putudharma4352
    @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!

  • @isabellexavier5458
    @isabellexavier5458 Жыл бұрын

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

  • @NeoCoderNet

    @NeoCoderNet

    8 ай бұрын

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

  • @skunkml2449
    @skunkml2449 Жыл бұрын

    You nailed it bro! Really great content.

  • @Filaxsan
    @Filaxsan2 ай бұрын

    Another banger! Great job brother 💪

  • @HornAmiir
    @HornAmiir10 ай бұрын

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

  • @JoSanInk
    @JoSanInkАй бұрын

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

  • @Uzair57
    @Uzair579 ай бұрын

    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

    @ethiopiamezmurchannel

    6 ай бұрын

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

  • @insidiousballer5775
    @insidiousballer5775Ай бұрын

    Bravo, bien hecho!

  • @sweatypotato248
    @sweatypotato248 Жыл бұрын

    Omg, what gem of channel, Thankyou

  • @raffiart5795
    @raffiart579518 күн бұрын

    I really love your content bro. Keep the fire burning.

  • @bibs9924
    @bibs992426 күн бұрын

    Too bad I can't afford your courses atm because I definitely wouldn't mind paying for stuff with this level of quality. Very concise and well explained. Subscribing and hoping you get many more views, great stuff!

  • @360Benefit
    @360Benefit5 ай бұрын

    In four words YOU ARE A TUTOR, bravo!!

  • @Dakar4
    @Dakar4 Жыл бұрын

    Crazy content. Thanks and congrats.

  • @ClayAsbury122
    @ClayAsbury122 Жыл бұрын

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

  • @NeoCoderNet

    @NeoCoderNet

    8 ай бұрын

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

  • @dalan9034
    @dalan90342 ай бұрын

    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 :)

  • @user-qm8zd2ks5s
    @user-qm8zd2ks5s Жыл бұрын

    Thanks bro really enjoyed watching it

  • @cristinocanga
    @cristinocanga Жыл бұрын

    Goat again!

  • @SeriousSnake
    @SeriousSnake5 ай бұрын

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

  • @oussamareghay7081
    @oussamareghay70812 ай бұрын

    thanks for the nice and clean tutorial !

  • @osamugaming1807
    @osamugaming1807 Жыл бұрын

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

  • @sabonacio
    @sabonacio Жыл бұрын

    man you really made it easy Salutes from Portugal.

  • @migionie
    @migionie4 күн бұрын

    Thank you a lot! This Video is a miracle, really helps out with a lot of learning 😊👍🏼

  • @hehswhs1207
    @hehswhs1207 Жыл бұрын

    brother loved it .. Thank you so much ♥

  • @johnjenks
    @johnjenks Жыл бұрын

    Your content is amazing m8 please keep making it.

  • @anushkasingh9470
    @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!💥🤟

  • @coil8906
    @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

    @slayingthedragon

    Жыл бұрын

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

  • @Ilioski17
    @Ilioski17 Жыл бұрын

    Much better explaining than university professors, great job

  • @MilanGurung-oz5co
    @MilanGurung-oz5co3 ай бұрын

    one of the best animation tutorial video.

  • @zidanshaikh4929
    @zidanshaikh4929 Жыл бұрын

    bro how are you only at 20k subs this is so freaking good please keep making vids like this

  • @mrashad_com
    @mrashad_com4 ай бұрын

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

  • @octotube463
    @octotube4632 ай бұрын

    This video was really good; it was concise and complete

  • @mrezamuktasib
    @mrezamuktasib Жыл бұрын

    AGAIN good Explanation!

  • @robertgregg7028
    @robertgregg7028 Жыл бұрын

    Excellent job sir!

  • @flo8903YT
    @flo8903YT4 ай бұрын

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

  • @francisnjugunaldc
    @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

    @slayingthedragon

    Жыл бұрын

    Much love ❤️

  • @gildacles1238
    @gildacles123810 ай бұрын

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

  • @NeoCoderNet

    @NeoCoderNet

    8 ай бұрын

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

  • @ayushaggarwal906
    @ayushaggarwal9065 күн бұрын

    Thanks man this really helps

  • @alexanderpineda9068
    @alexanderpineda90686 ай бұрын

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

  • @DenzelBraithwaite
    @DenzelBraithwaite Жыл бұрын

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

  • @hasnaat-du4ft
    @hasnaat-du4ft4 ай бұрын

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

  • @snuw
    @snuw Жыл бұрын

    great visuals, narrative and explanation. thanks sir.

  • @rameenana
    @rameenana6 ай бұрын

    Thanks man. This was really helpful.

  • @army9700
    @army97002 ай бұрын

    Fantastic tutorial. keep up the awesome work

  • @MattBiddick
    @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

    @NeoCoderNet

    8 ай бұрын

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

  • @kange973
    @kange973 Жыл бұрын

    Exactly as i was searching😌

  • @rafix0293
    @rafix029311 ай бұрын

    Really great video. Tnx for the video. Keep Posting this kind of High Quality videos. Your subscriber will blow up soon

  • @TheuppercaseM
    @TheuppercaseM Жыл бұрын

    just discovered this channel and youre so underrated

  • @Fact-Explorer-Logan
    @Fact-Explorer-Logan Жыл бұрын

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

  • @haltertopbabe
    @haltertopbabe5 ай бұрын

    this is awesome!!!

  • @TricoliciSerghei
    @TricoliciSerghei Жыл бұрын

    Great video, thank you!

  • @prasadsainavarapu4376
    @prasadsainavarapu43762 ай бұрын

    excellent video man!! thanks for the help.

  • @orlamdc
    @orlamdc4 ай бұрын

    Fantastic! Thank you

  • @cyberprompt
    @cyberprompt Жыл бұрын

    wow. amazing first watch, now to make notes and demos. 👏👏👏 I assume some of those more complicated ones are in your libs, or are coming. subbed!

  • @sofianey3490
    @sofianey3490 Жыл бұрын

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

  • @adithyang6672
    @adithyang6672 Жыл бұрын

    Wow man evrything is soo clear and precise

  • @ch4gga
    @ch4gga Жыл бұрын

    This was amazing! Thank you!

  • @microsurf128
    @microsurf128Ай бұрын

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

  • @mykelcee
    @mykelcee7 ай бұрын

    I liked the way you teach keep it up bro!

  • @kingshukcs
    @kingshukcs Жыл бұрын

    Absolutely amazing content!!

  • @padmasekharpottepalem8172
    @padmasekharpottepalem8172 Жыл бұрын

    Excellent explanation. Thank you so much...

  • @noirsociety
    @noirsociety Жыл бұрын

    This is truly the best CSS animation tutorial I have ever seen! Thank you for showing us how to build our own mini-library through utility classes. You are such a great teacher and thank you for sharing your knowledge with us :)

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you so much ❤️❤️❤️☺️

  • @theburstgamer962

    @theburstgamer962

    Жыл бұрын

    @@slayingthedragon bro is there any differeence between only transition and transition delay

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    @@theburstgamer962 Transition is a shorthand and can do all of the individual transition properties while transition-delay can only add a delay

  • @emmanuelochuko3204
    @emmanuelochuko3204 Жыл бұрын

    Thanks. This was helpful.

  • @codebreaker8928
    @codebreaker89282 ай бұрын

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

  • @Cutseen3
    @Cutseen3 Жыл бұрын

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

  • @agohasamuel327
    @agohasamuel327 Жыл бұрын

    I understood everything perfectly, quality video👍

  • @chanathipmorths7323
    @chanathipmorths73239 ай бұрын

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

  • @TimGavin
    @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

    @NeoCoderNet

    8 ай бұрын

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

Келесі