#31 CSS Transition Tutorial - CSS Full Tutorial

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

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

  • @skadara9555
    @skadara9555 4 года назад +22

    This was nice and easy to understand for a beginner like me. Nearly finished the videos in the series, look forward to more! :)

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

      Hey skadara! Thank you for the support, stay tuned for more 🙂👍

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

    Css is the toughest ...but you make it look so easy

  • @vanesanguyen8074
    @vanesanguyen8074 4 года назад +3

    Thank you for the lesson. I have learned a lot🤗🤗🤗

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

      Thank you so much for the support, stay tuned for more 🙂

  • @Shelly-kx2wz
    @Shelly-kx2wz 3 года назад +23

    This channel is criminally underrated.The quality of these videos are so amazing.

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

      Thanks for this awesome comment and your support! Really glad you are enjoying the videos 😃👍

  • @BrianKeeley-wo4fj
    @BrianKeeley-wo4fj 2 месяца назад

    Your videos are so good

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

    Last transition was osm..

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

      Hey Tech Programer, thank you so much for watching 🙂👍

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

    Don’t know who this might help but you don’t actually need to use transition property I tried it and removed transition property and it still works try it for yourself

  • @lonnietarrant3681
    @lonnietarrant3681 4 года назад +3

    Fabulous tuts!

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

      Thank you Lonnie! Many more to come 😬

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

    Awesome explanation! Subbed!

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

    thank you so much...so helpful

  • @ΠαπαδόπουλοςΓεώργιος-τ6ξ

    hello! thats great tutorial thank you. but how i can do that on a navbar? i want to put it until the video is 2:50

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

    Learned a lot from this series, thank you! I'm a little bit confused about one place: is there any rule that determine which selector we should put out "transition-property" in? e.g. at 2:47, could we put "transition-property" in the selector "div:hover" ? Thank you.

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

    I have a problem When It comes to the background color, Is that When I load the page the element with the transition trigger the transition, any solution?

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

      Hey Gonzalo, can you link to your code please (codepen maybe)? and I'll gladly take a look to see if I can help, thanks so much for watching! 🙂 👍

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

    well explained :)

  • @jesusmiranda9620
    @jesusmiranda9620 3 года назад +7

    Your channel deserves more views. I'll be pointing people in your direction, thanks!

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

      Awesome! Thank you so much, I really appreciate the love 🙂👍

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

    Thankyou so much, these days its hard to find such clear and amazing tutorials like yours! :))

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

    I am from Uzbekiston , I like video

  • @jaydenmoon1165
    @jaydenmoon1165 3 года назад +6

    This was a really great lesson on transition - very clear and easy to understand - amazing :)

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

      Hey Jayden, thank you! 🙂👍

  • @iambasiljoy
    @iambasiljoy 3 года назад +4

    You are a good teacher, Explained it very clearly. Thanks a lot.

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

    hello from the screen

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

    Wonderful 👍😊

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

    can i have src code plzzz my laptop's have a prob that makes it very tuff to open a browser.......

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

    I want to understand something
    Does CSS always look at .hover to implement the transitions?

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

    Thank you senior , your way of explaining made it so easy to understand.
    Best wish for u to succeed

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

    WOW

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

    One quick tip: Instead of going to a cubic-bezier site you can also experiment with it in the dev tools section!

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

    Hi, I want to ask: When I hover over the box, it does the code I have written, but when I hover out, the transition is not there.
    Could you please tell me, what i do wrong?
    Thanks.

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

      Hey Milos, first of all thank you for watching be sure to Like and Sub for more 🙂👍 I’d be happy to take a look at your code, can you link to it somehow?

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

      You specified the transition to happen only on hover with the div : hover

  • @qeysm1838
    @qeysm1838 10 месяцев назад

    good work man, SUBSCRIBED.

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

    thx, liked and subscribed 👍🏻

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

      Awesome! Thank you so much! 🙂👍

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

    what text editor or ide are you using?

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

      Hey, thanks so much for watching! In this video I am using Brackets (brackets.io/), but I use VS Code now 🙂👍

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

      @@DevDreamer ok,thanks for telling me

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

    You got a new subscriber .. Congratulations that's me💖

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

      Hi Eswar! Thank you so much for the support 🙂👍

  • @mahmoudmohamed-xu2lb
    @mahmoudmohamed-xu2lb 2 года назад

    i like your way thanks bro for your effort

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

    thank you so much! it was really easy to understand!

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

    AMAZING!!!

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

      Thank you! Are you using css animation in a project or just learning? Thanks so much for watching 🙂👍

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

    I must be honest, you are the best❤.

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

    So cool

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

      Hi Shanaya, thank you. 😎 👍

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

    no words....really good..thanku

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

      Hi Reshma! Thank you so much, glad it helped 🙂

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

    Thanks sir is very cool you wonderfull of- (cubicbezier) because i don't know about this property 👍🤩

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

    Also Could you share source code?

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

    Ramal from tiktok is that you?

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

    Hi Emmet, thank u for your tutorials:)
    i think you forgot to add a link for "cubic-bezier" below the video.

    • @DevDreamer
      @DevDreamer  4 года назад +3

      Hey Gloom tv, thank you so much for the support, really appreciate it! Sorry, thanks for pointing that out! I've added it in the description now. Stay tuned for so much more 😬(Also, it's Amit 🙂 but no worries 😜)

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

    Very good explained. Thanks.

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

      Hey Ilhom, thank you so much, please stay tuned for more 🙂👍

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

    thanks you are a good teacher

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

    Sir I want to become react js developer ...what should I learn..pls sir can u guide to me...I am new to this channel

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

      Hey Naresh, thanks for watching brother 🙂👍 Here are my tips for you:
      (1) Of course you should know HTML and CSS, full tutorials for both are on the channel.
      (2) Master vanilla Javascript, do not neglect it. I have a full JS tutorial coming up on the channel very soon, so make sure you're subscribed and keep an eye out for it.
      (3) Learn from multiple resources, RUclips, the official docs etc.
      Thanks for the support, let me know if you have any other questions 👍

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

      @@DevDreamer sir ....is necessary to learn data structures and algorithms...to become web developer

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

    Can you take the lesson on the topic "Dropdown Menu on hover"?

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

      Hey Reshma, thank you for the suggestion I will definitely look into doing this 🙂👍

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

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

    u deserve a subscribe boss

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

    Very interesting content Thanks a lot

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

      Glad you enjoyed it! 🙂👍

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

    You earned a sub. What a clear cut tutorial for a beginner. But one thing was lacking that is transform origin.

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

      Hi Shakil, thank you so much for watching, appreciate the sub 🙂👍

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

    Best tutorial ever

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

    great teaching style

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

    Remember, in order to change size of elements, use transform scale and not height/width, it may affect the webpage otherwise.

  • @anands3119
    @anands3119 4 года назад +3

    Great job🔥

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

      Hey Anand, thanks for the great support and encouragement! Really means a lot 👍

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

    source code

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

    Thanks❤

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

    your videos are excellent, you have received my sub.

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

      Hey Ahmed! Thank you very much, I appreciate your support, loads more to come! 🙂👍

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

    Best Video on transition in RUclips! Thank you so much

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

    Keep going 👏

  • @tibebetech4867
    @tibebetech4867 7 месяцев назад

    COOL!

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

    amazing class

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

    Are u Indian

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

    its amazing,, i have watched all css videos. Thank you so much Dev Dreamer for open source...

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

    Wow this was a very clear video, thank you so much!

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

      Glad it was helpful! 🙂👍

  • @HaifengZhu-pn3uq
    @HaifengZhu-pn3uq Год назад

    cool

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

    where were you all this time!!!!

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

      Hey Ishu! Apologies, new content coming very soon 🙂👍

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

    i wish i could subscribe more than once..

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

      🔥 Hey jux salley! Thanks for watching, really appreciate your support 🙂👍

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

    Genius!

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

    I always use this video as a reference when I haven't touched css in months.

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

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

    Thanks bro! it's a well done job for beginners like me. Please do more and more...

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

    Ease in will start slow and end fast. Ease out will do the opposite.
    Linear m same speed

  • @kevinm.1565
    @kevinm.1565 3 года назад +2

    Great stuff! :-)

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

      Hey Kevin! Thank you very much 🙂👍

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

    I love your videos so much!

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

    Thank you bro...you make this so easy 😊😊

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

      🔥 Thank you so much, really glad you found it helpful 🙂👍

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

      @@DevDreamer i have finished your web design all classes really i learn a lot off things...just prepare for ur js class you make this so easy to understand thanks elder brother

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

    so easy to understand thank you

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

    This was really helpful thanks!

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

    Subscribed👍👍

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

      Awesome! Thank you 🙂👍

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

    In love with this channel ~ very easy to follow

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

    amazing way of teaching

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

    Feels like "Cold fusion TV"

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

    Finally, A complete channel to learn!

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

      Hey Melvin! Thanks for the great support and comments, really means a lot 🙂👍

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

      You deserve it man👌

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

    U deserve more subscribers

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

    Thanks!

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

      Hey Renny! You are most welcome, thank you 🙂👍

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

    Nice video but please change the cover image. I came to see the animation shown in cover not the basics.
    The title didnt mention the word basic or beginner.
    This is missleading.

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

      Hi Rahul, thanks for watching! Did you watch the video all the way through? Because at 6:55 I show how to turn the square into a circle, which is exactly what the thumbnail shows.
      This lesson is designed to get people up and running with CSS Transitions, and I think it accomplishes this well.

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

      @@DevDreamer what i ment is the transition. Not just make it round. The cover has a unique shape in middle.
      Also, i did enjoy your video.

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

      Hey Rahul, the unique shape in the middle is just there to show the transition (i.e. the change from the square to the circle) using a still image. It is not meant to be a different shape before the circle. It’s just there to show the square changing into a circle. Hope this clarifies.
      Glad you enjoyed the video.

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

    Thank you 💓

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

      Hey Aryan, thank you so much for watching 🙂👍

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

      @@DevDreamer thank you for reply sir❤️

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

    i'm a tire!

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

      Hey Darwin! Indeed 😬👍

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

      @@DevDreamer wait, i was supposed to not to say that. sorry. i think i'm just bored.