Learn CSS Animation In 15 Minutes

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

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

  • @sakshamchaudhary1608
    @sakshamchaudhary1608 3 года назад +1435

    His hair are more aligned than my website 😂

  • @knotcircle2844
    @knotcircle2844 3 года назад +22

    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

  • @kosemekars
    @kosemekars 4 года назад +192

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

    • @AngelOfDeath943
      @AngelOfDeath943 4 года назад +1

      Me too

    • @dv4able
      @dv4able 4 года назад +7

      You mean in devtools? 😏

    • @sfoxj
      @sfoxj 4 года назад +1

      He means yes but in the console tab

    • @jackhuang1828
      @jackhuang1828 3 года назад

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

    • @jackhuang1828
      @jackhuang1828 3 года назад

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

  • @ajc53
    @ajc53 4 года назад +114

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

  • @petarkolev6928
    @petarkolev6928 3 года назад +21

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

  • @nsharma4981
    @nsharma4981 4 года назад +96

    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
      @tposell1450 2 года назад

      Diwali animation using html and css
      ruclips.net/video/8xAUi0UzSGw/видео.html

  • @Miguelmigs24
    @Miguelmigs24 3 года назад +22

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

    • @tposell1450
      @tposell1450 2 года назад

      Diwali animation using html and css
      ruclips.net/video/8xAUi0UzSGw/видео.html

  • @haroldcjennettiii
    @haroldcjennettiii 4 года назад +7

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

  • @abdulrhmana.elshiekh383
    @abdulrhmana.elshiekh383 15 дней назад

    dude you are a legend !!
    whenever I am stuck at learning anything related to webdev I look forward to your channel

  • @firedforfighting
    @firedforfighting 4 года назад +6

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

  • @shreshtha786
    @shreshtha786 4 года назад +4

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

  • @ed1nh0
    @ed1nh0 4 года назад +9

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

  • @jakebrenneman5132
    @jakebrenneman5132 3 года назад +1

    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
      @jakebrenneman5132 3 года назад

      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!

  • @tinchovm85
    @tinchovm85 2 года назад

    ¡Gracias!

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

    His channel's name is worth it. "Web Dev Simplified". He really has simple ways for each and every step.

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

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

  • @RayquanRogers
    @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) 😁💯

  • @stresslesswd4184
    @stresslesswd4184 3 года назад +5

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

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

  • @marceloguzman646
    @marceloguzman646 3 года назад

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

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

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

  • @13_yashbhanushali40
    @13_yashbhanushali40 3 года назад +1

    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

  • @HosamSultan
    @HosamSultan 2 года назад +1

    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!

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

    Love from India ❤️

  • @genjioto
    @genjioto 2 года назад +1

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

  • @BigSmoke-r9w
    @BigSmoke-r9w Год назад +1

    You, my handsome teacher, has my subscribe!!

  • @anotherdaydrawing908
    @anotherdaydrawing908 5 месяцев назад

    hell ya boy, lessons like that is what i need, simple, practical and objective. nice, you got another one subscribe.

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

    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

  • @josephlivengood4508
    @josephlivengood4508 4 года назад +19

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

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

    Absolutely insane how well you managed to explain this. Respect

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

    dude just came straight to the point without wasting our time

  • @niranjantamhane3602
    @niranjantamhane3602 3 года назад

    Perfect beginning for CSS animation learning

  • @shrirambalaji2109
    @shrirambalaji2109 2 года назад +1

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

  • @victorbustamante1647
    @victorbustamante1647 2 года назад

    web dev simplified, or the real youtube OG, thanks a ton for your content man

  • @sarowarhosen003
    @sarowarhosen003 8 месяцев назад

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

  • @عقيلمحمد-ب3ن
    @عقيلمحمد-ب3ن 12 дней назад

    uh-huh, I'm glad!!! ☺️
    Bro, I'm not sure that my words r enough to say
    thank u.
    I'm following u 4 along time, along time, Bro.
    I hope u well..
    U learned me anything, (anything) I wanted in CSS + JS, till now.
    There's alot to say... but no ⏰ for that.
    U r a great one, I loved your WDS
    (Ageel Mohammed, Sudan)😊

  • @reinhardtbasson4890
    @reinhardtbasson4890 2 года назад +4

    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.

  • @josuebarros-desenvolvedorw2490
    @josuebarros-desenvolvedorw2490 3 года назад

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

  • @Matrix-z2s
    @Matrix-z2s 11 месяцев назад

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

  • @omnihorse7618
    @omnihorse7618 4 года назад +1

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

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

    Wow, what an excellent tutorial. Thank you so much! You have a gift for teaching.

  • @jamjam3448
    @jamjam3448 4 года назад

    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.

  • @Owolabijunior
    @Owolabijunior 2 года назад

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

  • @rauldelacruz8139
    @rauldelacruz8139 3 года назад

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

  • @Bee00000
    @Bee00000 2 года назад

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

  • @sidarjunful
    @sidarjunful 3 года назад

    Wow you made it soooo much easier to understand than the docs.

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

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

  • @MiSt3300
    @MiSt3300 4 года назад +2

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

  •  3 года назад +3

    Thanks for this lesson.

  • @omegamotivation144
    @omegamotivation144 4 года назад +2

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

    • @maskman4821
      @maskman4821 4 года назад

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

  • @benaliabdelmalek100
    @benaliabdelmalek100 2 года назад

    You are my favorite dev youtuber, everyday I am learning new things in your great channel. keep going you are the best 🙂

  • @hassaanrazanow701
    @hassaanrazanow701 4 года назад

    the best video on css animation! great work

  • @lazykid1477
    @lazykid1477 3 года назад

    this channel is gold

  • @Новаинжиниринг
    @Новаинжиниринг 2 года назад

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

  • @CreatewJR
    @CreatewJR 3 года назад

    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.

  • @dogethegamer551
    @dogethegamer551 3 года назад

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

  • @ArnoVicD
    @ArnoVicD 4 года назад

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

  • @natisaver
    @natisaver 3 года назад

    fr everything i have searched abt web dev kyle u appear bro u the best hahaha

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

  • @daniel-rrr
    @daniel-rrr 2 года назад +1

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

  • @mahmudamahmi
    @mahmudamahmi 3 года назад

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

  • @Kostrytskyy
    @Kostrytskyy 4 года назад +2

    Clean and nice. As always!

  • @pedromusic7986
    @pedromusic7986 2 года назад

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

  • @mauro21523
    @mauro21523 2 года назад

    Simplified, conceptual and very understable, thank you Kyle!

  • @sriram-zn3ic
    @sriram-zn3ic 4 года назад +1

    Great work dude really wanted this video

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

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

  • @ahmedkrdzalic4425
    @ahmedkrdzalic4425 4 года назад

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

  • @rakeshraman4380
    @rakeshraman4380 3 года назад +2

    GODD DAY, SIR. YOU ARE A GOOD TEACHER. YOUR EXPLATION IS VERY INFORMATIVE AND INMPORTANT. THANKS AGAIN FOR YOUR KIND HELP. GOD MAY BLESS WITH ALL SUCCESS IN LIFE. THANKS AGAIN.

  • @Born2DoubleUp
    @Born2DoubleUp 3 года назад +1

    I'm here! 😎 Great video, just posting a comment to show some support! Keep up the good work. 🤙

  • @aninexclusive466
    @aninexclusive466 13 дней назад

    Your videos are always perfect for me.

  • @AyyazTech
    @AyyazTech 2 года назад

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

  • @damianocaffa8661
    @damianocaffa8661 2 года назад

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

  • @antoineassaf7508
    @antoineassaf7508 3 года назад

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

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

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

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

    dang that was clear, well done young fellow

  • @bokimitrovicc
    @bokimitrovicc 3 года назад

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

  • @sunnatakhmedov2466
    @sunnatakhmedov2466 3 года назад

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

  • @MaxProgramming
    @MaxProgramming 4 года назад +2

    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

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

    This tutorial is great! Thank you!

  • @estherinyang4779
    @estherinyang4779 2 года назад +2

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

  • @aaleex012
    @aaleex012 2 года назад

    Very straight forwards, thanks!

  • @sushmithachebolu2995
    @sushmithachebolu2995 3 года назад +1

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

  • @jumaelahmed9995
    @jumaelahmed9995 4 года назад

    One of the best Dev exists, thanks Dev.

  • @suchetamukherjee3570
    @suchetamukherjee3570 2 года назад

    This video has been very helpful. Thanks for sharing.

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

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

  • @franciscomontesgomez2067
    @franciscomontesgomez2067 2 года назад

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

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

    Very simple and great tutorial. Thanks a lot!

  • @adip9213
    @adip9213 4 года назад

    The best animation tutorial. Thank-you very much

  • @thulierlaurent
    @thulierlaurent 4 года назад

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

  • @aviyt
    @aviyt 2 года назад

    Congratulations On Your 1M I have also subscribed. Love From India.

  • @arturluckyanenko32
    @arturluckyanenko32 4 года назад

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

  • @stacydevries4241
    @stacydevries4241 2 года назад +1

    By grace the code worked as followed by Kyle for the alternating iterations, however now I need to debug the code because I have a problem with turning the animation to blue in the middle of the sequence. No worries Kyle is gran maestro. No se precupe Kyle is a great professor.

  • @fndforever7650
    @fndforever7650 3 года назад

    hey dude, nice work .this video is easier to understand

  • @kimuelanqui467
    @kimuelanqui467 3 года назад

    Thank you for the cheat sheet

  • @bestcode4321
    @bestcode4321 3 года назад

    It was simple and clear , Thank you

  • @kaveengoonawardane9651
    @kaveengoonawardane9651 2 года назад

    Amazing video. Thanks mate!

  • @evaneself
    @evaneself 2 года назад

    Bravo! Thank you, Master!

  • @upierczileonheart7020
    @upierczileonheart7020 2 года назад

    Thank you for this tutorial, it really helped

  • @DShazin
    @DShazin 3 года назад

    absolutely amazing vid!

  • @viktorlernt6063
    @viktorlernt6063 3 года назад

    Thank you very much, it was very helpful to start with CSS anmations. 👍

  • @sithumdilanga650
    @sithumdilanga650 3 года назад

    Thanks man. simple and clear