Learn CSS Animations In 20 Minutes - For Beginners

Поделиться
HTML-код
  • Опубликовано: 21 сен 2024

Комментарии • 691

  • @slayingthedragon
    @slayingthedragon  11 месяцев назад +19

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

  • @fernandoboschiero1178
    @fernandoboschiero1178 Год назад +348

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

    • @slayingthedragon
      @slayingthedragon  Год назад +15

      Thank you so much ☺️❤️❤️

    • @NeoCoderNet
      @NeoCoderNet 11 месяцев назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

    • @top10youtubevideos64
      @top10youtubevideos64 4 месяца назад +2

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

  • @remikuraa
    @remikuraa 6 месяцев назад +13

    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)

  • @waylanddigital
    @waylanddigital Год назад +58

    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.

  • @johnramos7761
    @johnramos7761 Год назад +30

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

    • @infinitybuilds
      @infinitybuilds 3 месяца назад

      21 minutes and 22 seconds is not short…

    • @Iettuce1
      @Iettuce1 Месяц назад

      @@infinitybuilds better than reading an article for 40 minutes imo

    • @infinitybuilds
      @infinitybuilds Месяц назад

      @@Iettuce1 thats true ig

  • @jesf570
    @jesf570 2 месяца назад +3

    Holy shit, this is how all youtube videos on coding related tutorials should be shown. Amazing. Amazing.

  • @Uzair57
    @Uzair57 Год назад +16

    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 9 месяцев назад

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

  • @amad7.7
    @amad7.7 Год назад +355

    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  Год назад +21

      Thank you very much !! 😊

    • @qaushain
      @qaushain Год назад +5

      So true

    • @5464654135756
      @5464654135756 Год назад +7

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

    • @vivu9459
      @vivu9459 Год назад +1

      It’s true

    • @StarHive5
      @StarHive5 Год назад +1

      🎉HE DID🎉🎉😊

  • @GuillermoArellano
    @GuillermoArellano 4 месяца назад +4

    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!

  • @francisnjugunaldc
    @francisnjugunaldc Год назад +8

    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

  • @2010daigo1
    @2010daigo1 Год назад +18

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

  • @pranavdcpatil
    @pranavdcpatil Год назад +7

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

  • @shahobiddinismoilov
    @shahobiddinismoilov 3 месяца назад +1

    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

  • @bibs9924
    @bibs9924 3 месяца назад +2

    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!

  • @soundtrickz
    @soundtrickz Год назад +12

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

    • @padhai2535
      @padhai2535 2 месяца назад

      Are you full stack developer now??

    • @soundtrickz
      @soundtrickz 2 месяца назад

      @@padhai2535 yes I am

  • @codebreaker8928
    @codebreaker8928 5 месяцев назад +1

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

  • @bartheus6709
    @bartheus6709 Год назад +3

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

  • @Eavesdro_pper
    @Eavesdro_pper 2 месяца назад +2

    This is what I have been looking for , dude you deserve my subscription.

  • @thuanh9247
    @thuanh9247 6 месяцев назад +1

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

  • @akmzahidulislam2764
    @akmzahidulislam2764 Год назад +2

    You probably don't know what invaluable resources you are throwing to us! All I need to do is to train myself as a good fielder (like in cricket) to become an effective ball catcher. Keep it up, bro! This way of teaching tech is the best to teach the difficult aspects of coding. This is like having a sherpa in the attempt of climbing the mount Everest! Follow, and explore further!

  • @NeverEvi
    @NeverEvi Год назад +4

    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!

  • @avrakadavra1552
    @avrakadavra1552 5 месяцев назад +2

    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

  • @dalan9034
    @dalan9034 5 месяцев назад +1

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

  • @gildacles1238
    @gildacles1238 Год назад +2

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

    • @NeoCoderNet
      @NeoCoderNet 11 месяцев назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @noirsociety
    @noirsociety Год назад +22

    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 ❤️❤️❤️☺️

    • @UjjwalMishra_68
      @UjjwalMishra_68 Год назад

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

    • @slayingthedragon
      @slayingthedragon  Год назад +2

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

  • @codeme8016
    @codeme8016 24 дня назад +1

    Amazing, clear and comprehensive!

  • @surajgoraicse
    @surajgoraicse 2 месяца назад +1

    This is a masterpiece... Love from India..

  • @coil8906
    @coil8906 Год назад +1

    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  Год назад +1

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

  • @thebluriam
    @thebluriam Месяц назад +1

    A master in the craft and a phenomenal RUclips name, insta-subscribed

  • @sachingyandeogaikwad6278
    @sachingyandeogaikwad6278 Год назад +2

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

  • @underconstructionpersonalt725
    @underconstructionpersonalt725 8 месяцев назад +2

    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.

  • @RoccoBronson
    @RoccoBronson 9 месяцев назад +1

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

  • @artemisfowl9002
    @artemisfowl9002 Год назад +1

    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

  • @Nutts2Butts
    @Nutts2Butts Год назад +9

    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!

  • @ArunM-y1e
    @ArunM-y1e Год назад +2

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

  • @meeljan
    @meeljan Год назад +1

    This will be huge once it blows up. I'm so lucky i found this

  • @HornAmiir
    @HornAmiir Год назад +6

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

  • @TimGavin
    @TimGavin Год назад +1

    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 11 месяцев назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @shineLouisShine
    @shineLouisShine Год назад +1

    Very kind of you o share your knowledge and talent.
    Nevertheless, after the start - it did cross my mind that the video will contain unique shapes...

  • @Mridul_Paul
    @Mridul_Paul 11 месяцев назад +4

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

  • @DenzelBraithwaite
    @DenzelBraithwaite Год назад +1

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

  • @amanpratapsingh3256
    @amanpratapsingh3256 Год назад +3

    Man How do you create such a high quality videos with so much of condensed data.....I will also say that you have some dope video editing skills....Now we need lesson on video editing also.

  • @josephcastillo3941
    @josephcastillo3941 Год назад +1

    That glowing button is *chefs kiss*, any chance we can get a full blown breakdown of those effects you did?

    • @slayingthedragon
      @slayingthedragon  Год назад

      Maybe I might :p

    • @hehswhs1207
      @hehswhs1207 Год назад +1

      @@slayingthedragon brother you need to .. your audience is waiting for it .. 🥲

  • @isabellexavier5458
    @isabellexavier5458 Год назад +3

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

    • @NeoCoderNet
      @NeoCoderNet 11 месяцев назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @SeriousSnake
    @SeriousSnake 8 месяцев назад +1

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

  • @theloose7971
    @theloose7971 Год назад +1

    I'm very happen, that the algorithm showed me your channel. Keep your great work up

  • @IrfanShaikh-br9ie
    @IrfanShaikh-br9ie Год назад +1

    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
      @slayingthedragon  Год назад

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

    • @NeoCoderNet
      @NeoCoderNet 11 месяцев назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @microsurf128
    @microsurf128 4 месяца назад +1

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

  • @ogeochife2443
    @ogeochife2443 6 месяцев назад +2

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

  • @JoSanInk
    @JoSanInk 4 месяца назад +1

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

  • @putudharma4352
    @putudharma4352 Год назад +1

    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!

  • @adeptusxiao02
    @adeptusxiao02 Год назад +103

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

    • @My3dstudio686
      @My3dstudio686 9 месяцев назад

      Same

    • @chehi5624
      @chehi5624 9 месяцев назад

      Fr

    • @Speedytransloop_Inc
      @Speedytransloop_Inc 9 месяцев назад +5

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

    • @adeptusxiao02
      @adeptusxiao02 9 месяцев назад +1

      @@Speedytransloop_Inc we use java🫠

    • @adagodwin8976
      @adagodwin8976 6 месяцев назад

      Samee

  • @anushkasingh9470
    @anushkasingh9470 4 месяца назад +1

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

  • @BindomCongat2
    @BindomCongat2 11 месяцев назад +103

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

    • @UchennaChimaobi
      @UchennaChimaobi 5 месяцев назад +23

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

    • @bhanupriyasd1899
      @bhanupriyasd1899 5 месяцев назад +4

      Exactly

    • @ChroniclesChro
      @ChroniclesChro 4 месяца назад +6

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

    • @Toxic_Trader100
      @Toxic_Trader100 7 дней назад

      That's good

  • @migionie
    @migionie 3 месяца назад +1

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

  • @octotube463
    @octotube463 5 месяцев назад +2

    This video was really good; it was concise and complete

  • @GfoxSim
    @GfoxSim 8 месяцев назад +1

    WOW! Animation really makes websites look cool and fun to use. It's like Tony Stark's impressive interfaces.

  • @codewithabdo7790
    @codewithabdo7790 6 месяцев назад +1

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

  • @flo8903YT
    @flo8903YT 7 месяцев назад +1

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

  • @UmerKhalid206
    @UmerKhalid206 3 месяца назад +1

    Simply Love the way you explained

  • @osamugaming1807
    @osamugaming1807 Год назад +1

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

  • @CaioCromos
    @CaioCromos 4 месяца назад +1

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

  • @sufyanakbar7153
    @sufyanakbar7153 9 месяцев назад +2

    Where were you all my life. This is gold

  • @AltBox4
    @AltBox4 Год назад +1

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

  • @developer_014
    @developer_014 Год назад +3

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

  • @dylanbringas8704
    @dylanbringas8704 Год назад +1

    I am so grateful to found this channel, you explain everything perfectly, ty so much for your effort,. I wish you the bests.

  • @runyagwavava4930
    @runyagwavava4930 3 месяца назад +1

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

  • @FMNathan999
    @FMNathan999 7 месяцев назад +1

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

  • @ragazzosereveracasowebde-qt5jp
    @ragazzosereveracasowebde-qt5jp Год назад +1

    i am a beginner at web developing so thanks for this video

  • @hasnaat-du4ft
    @hasnaat-du4ft 7 месяцев назад +3

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

  • @KyrylWins
    @KyrylWins 6 месяцев назад +1

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

  • @MilanGurung-oz5co
    @MilanGurung-oz5co 6 месяцев назад +1

    one of the best animation tutorial video.

  • @m.m4051
    @m.m4051 Год назад +8

    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 🙏

  • @pedromuniz-b7d
    @pedromuniz-b7d 10 месяцев назад +1

    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!

  • @sanarahman6996
    @sanarahman6996 Год назад +1

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

  • @360Benefit
    @360Benefit 8 месяцев назад +1

    In four words YOU ARE A TUTOR, bravo!!

  • @mihailvasilkoff4330
    @mihailvasilkoff4330 8 дней назад +1

    You deserve my subscription! Fabulous

  • @Luxcium
    @Luxcium Год назад +2

    I got that in my feed and I subscribed I have to admit that I am writing this comment at 0:10 and that I can not wait to watch all your other videos ....

  • @sabonacio
    @sabonacio Год назад +1

    man you really made it easy
    Salutes from Portugal.

  • @JEFFSEOLLC
    @JEFFSEOLLC 11 месяцев назад +1

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

  • @arthurkelvim5689
    @arthurkelvim5689 Год назад +1

    Im Brazilian Student and you help me, thanks bro.

  • @amineherizi4687
    @amineherizi4687 Год назад +1

    Where are you man ? we need more videos from you ! You ROCK !!

    • @slayingthedragon
      @slayingthedragon  Год назад +1

      Thank you! I'll be back in like a week with an announcement and then weekly videos. Ive been busy with this -> slayingthedragon.io
      Much love!

  • @MattBiddick
    @MattBiddick Год назад +3

    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 11 месяцев назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @rmy48srikanth45
    @rmy48srikanth45 Год назад +2

    good morning sir
    my name is srikanth, good explaination , thank you for uploading these types of videos...
    we need more like these css properties
    like.........................
    position,
    grid
    etc..
    thanking you
    G.Srikanth

    • @slayingthedragon
      @slayingthedragon  Год назад +1

      Many more videos on the way 🤝🤝💯

    • @slayingthedragon
      @slayingthedragon  Год назад +1

      Although grid is already up ruclips.net/video/EiNiSFIPIQE/видео.html

    • @rmy48srikanth45
      @rmy48srikanth45 Год назад +1

      @@slayingthedragon thank you sir but make sure we need a complete video on css full tutorial
      we are waiting for that

  • @dynowealth
    @dynowealth Год назад +1

    Much better explaining than university professors, great job

  • @vaibhavtyagi619
    @vaibhavtyagi619 Год назад +1

    i am a beginner and you blow up my mind bro and nicely explain

  • @zidanshaikh4929
    @zidanshaikh4929 Год назад +1

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

  • @ClayAsbury122
    @ClayAsbury122 Год назад +1

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

    • @NeoCoderNet
      @NeoCoderNet 11 месяцев назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @cocgamerzs5049
    @cocgamerzs5049 Год назад +1

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

  • @mrashad_com
    @mrashad_com 7 месяцев назад +1

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

  • @iamagamer4413
    @iamagamer4413 10 месяцев назад +2

    Finally a RUclipsr that asks you to like and subscribe correctly

  • @victoriakezerle-cole
    @victoriakezerle-cole Год назад +1

    Thank you.. ily rn cause i was beating my head into a wall trying to figure our where i was suppose to connect the code to get the style to work! omg.

  • @taherariwala4055
    @taherariwala4055 Год назад +1

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

  • @ylc4739
    @ylc4739 Год назад +1

    I'm guessing u don't use bootstrap .... amazing content. You are my hero!

  • @TokyoXtreme
    @TokyoXtreme 6 месяцев назад +1

    13 videos and 94k subs - hell yeah. I'll probably binge them all tomorrow.

  • @raffiart5795
    @raffiart5795 3 месяца назад +1

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

  • @sayanghosh6996
    @sayanghosh6996 Год назад +18

    this is really helpful and way more detailed than other tutorials, thanks

    • @slayingthedragon
      @slayingthedragon  Год назад

      Thank you! I'm glad it was helpful 😃

    • @NeoCoderNet
      @NeoCoderNet 11 месяцев назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @elguacam0le
    @elguacam0le Год назад +1

    The best video about CSS animations. Thank's !

  • @mimcris8481
    @mimcris8481 9 месяцев назад +1

    One of the best CSS contents on RUclips!

  • @zabinoori49
    @zabinoori49 Год назад +1

    you defennitely deserve 1M subsciber and soon you will get it👌👌💕💕