CSS Transition (CSS Animations Series Part 1)

Поділитися
Вставка
  • Опубліковано 14 січ 2025

КОМЕНТАРІ • 593

  • @ahmedkhaled1068
    @ahmedkhaled1068 8 років тому +6

    I swear my jaw literally dropped at 17:39. 🙌
    Awesome Tutorial. 👏

  • @WolfersHD
    @WolfersHD 8 років тому +2

    I like that you go over actual use cases unlike the "static by-the-definition" tutorials most people put out. I hope this series lasts a long time :)

    • @OfficialDevTips
      @OfficialDevTips  8 років тому

      Thanks Wolfers! Me too!

    • @RyantheCanuckpirate
      @RyantheCanuckpirate 2 роки тому

      This is is an old comment but it's at the top for me so I'm gonna respond.
      I agree. Knowing how to do something probably won't stick unless I also learn *why* I want to do this.
      If use cases are given, then the knowledge stops being abstract and starts being another tool in my belt.

  • @sad-wn2ys
    @sad-wn2ys 8 років тому +291

    #devtips{
    transition: thumbs-up now;
    }

  • @ivihysenbelli475
    @ivihysenbelli475 4 роки тому +1

    When I first started to learn Web Dev came across one of his videos, the rest is history!

  • @thetiredtire4015
    @thetiredtire4015 8 років тому

    I've been a daily youtube watcher for years, but yours is actually the first channel I use the subscribe button to, very good content and teaching material, I'm on a viewing streak now.

  • @EdikManukyan1155
    @EdikManukyan1155 8 років тому +2

    overall dude, you're a cool developer, who shares his knowledge with others, and that everyone appreciates your work is a fact, nice job, hope to see a lots of new stuff from you soon :)

  • @MegaLooters
    @MegaLooters 6 років тому

    i will never see CSS same after ur video ! thnks

  • @JordanFromIT
    @JordanFromIT 8 років тому +10

    can't wait to see the key frames tutorial haven't managed to wrap my head around key frames in CSS

  • @HekaFOF
    @HekaFOF 8 років тому +30

    DevTips is at his roots :)

  • @yeaitsme6834
    @yeaitsme6834 8 років тому

    As always Travis, great job. Can't wait for the next part. There are always these little hidden gems in your tutorials that I keep using for my own projects. I never thought of making more complex transitions with multiple elements. Thanks again!

  • @nurwahidinsaputra1830
    @nurwahidinsaputra1830 3 роки тому

    wow its been 5 years..., good to see you again. and thanks you guys help me a lot

  • @eaglebirdiepar
    @eaglebirdiepar 8 років тому +2

    This guy deserves a lot more subscribers I learn so much

  • @arijitghosh6378
    @arijitghosh6378 3 роки тому +1

    This is an amazing tutorial. I keep coming back to it for various things. You were an mazing teacher and I learned a lot of stuff especially CSS from you. Its very sad that you left youtube.

  • @nitram_nosnibor
    @nitram_nosnibor 8 років тому

    Cheers Trav, I haven't been on for a while but back to web design now so it's good to be seeing/hearing you. Decided I'm going to be using Transform more now so this was super useful. Thanks again!

  • @JackbearAmine
    @JackbearAmine 8 років тому +1

    you're the best teacher for me now

  • @itsMilanYT
    @itsMilanYT 8 років тому +12

    I'm abolutely in love with the style of this episode.
    Especially the nice colour animated backgrounds.
    I'm wondering, how did you/your editor do that?
    Would love to intergrate something like that in a presentation for example.

  • @leandrodossantos9160
    @leandrodossantos9160 8 років тому

    Nice that you are humble enough to share these tutorials!!!!
    Thanks a lot.
    I'm starting as a front end developer and you have been helping a lot.
    Shout out from a Brazilian living in Amsterdam!!!
    Thanks again Man!!

    • @OfficialDevTips
      @OfficialDevTips  8 років тому

      You are welcome, and good luck in Amsterdam, I've heard its a cool place :)

    • @leandrodossantos9160
      @leandrodossantos9160 8 років тому

      Thanks, Well if you ever wanna come and see it for yourself
      you got a bud, thats how I have to repay you for putting good free content on the internet.
      Have a good one!

  • @_DeProgrammer
    @_DeProgrammer 8 років тому

    Thanks for all the videos Tdog! lol your my favourite channel man please don't stop the videos. Much Love!

  • @TechRatesHD
    @TechRatesHD 8 років тому +2

    I like this type of videos where it goes in dept of the subject. Keep it up!

  • @dasuew
    @dasuew 8 років тому

    Awesome style of performing a tutorial. I like your calmness. Thx for your effort

  • @ocanodiego
    @ocanodiego 8 років тому

    Loved it Travis, solid job. I will support through patreon for sure soon please keep rocking it.

  • @amanminhas6696
    @amanminhas6696 8 років тому

    Dude, just the ease with which you explain things is so damn impressive. I watch you and it makes me go and want to teach more people. Massive respect!

  • @256k_
    @256k_ 8 років тому

    Trav you're awesome. the quality of your videos is getting exponentially better! I'm in the process if finding me a job (or paying clients) in web development after deciding to change my career plans to this. once i get something going you're definitely going to be getting a new Patreon. :)

  • @rajb22
    @rajb22 8 років тому

    Wow, One of the best tutorial videos I have come across, really like your style, thank you.

  • @Juksemakeren
    @Juksemakeren 8 років тому +132

    opaycity

    • @Derek-y9q
      @Derek-y9q 8 років тому +2

      Humongos Wot?!?!?!?!?!

    • @Brainstudyandsign02
      @Brainstudyandsign02 8 років тому +1

      opacity:0.9 - 0.1; }

    • @hzmi_
      @hzmi_ 8 років тому +18

      for a second i thought i was pronouncing this wrong my whole life >_>

    • @MrJohn-wy2hn
      @MrJohn-wy2hn 7 років тому

      lol, for some reason I can't stop laughing with this comment

    • @lukem118
      @lukem118 7 років тому

      huver huver huver :DD

  • @sonimoretti
    @sonimoretti 8 років тому +1

    YOU ARE THE BEST TEACHER !!!

  • @shmighty6681
    @shmighty6681 7 років тому

    Simple, clean, and easy to understand. Thank you for the great work!

  • @alexanderbrown1178
    @alexanderbrown1178 8 років тому

    Fantastic video, Travis. I can't wait for the next one! Thanks for all you do :)

  • @funnyfoodguy
    @funnyfoodguy 7 років тому

    You sound almost just like Tom Segura. Best tutorials I've seen on here. Keep up the good work.

  • @alvarozarante4023
    @alvarozarante4023 6 років тому

    JUST AWESOME!!!! Thanks!

  • @N0biKn0bi
    @N0biKn0bi 6 років тому

    17:17 - oh my god. this is the moment me and the universe was one. Now I understand!! Thanks!

  • @designertjp-utube
    @designertjp-utube 5 років тому

    Wonderful CSS Lecture Video! Aroind Frames 8:10 you took me straight back to OldSkool *After* *Effects* 4.1 !

  • @sandovalproducer
    @sandovalproducer 5 років тому

    TIL about codepen in the despription of the video, woooahhh, fantastic tool. thank you

  • @ImStormFTW
    @ImStormFTW 8 років тому +1

    DevTips: The definition of a great UA-camr :D I lofe your tips series and 117 likes to 0 dislikes is amazing :P

  • @michyscholar3829
    @michyscholar3829 6 років тому

    The best teacher ever.

  • @TheodoreRavindranath
    @TheodoreRavindranath 7 років тому

    Way well explained! And you went for the little tricks and gotchas and best practices.. thanks for doing this!!

  • @malmahsyar3347
    @malmahsyar3347 8 років тому

    cant wait to see next part,..
    great tutorial trav

  • @fancylad2006
    @fancylad2006 8 років тому +1

    Fantastic tutorial, as they all are! Thank you.

  • @silentxcure
    @silentxcure 4 роки тому

    everyones laughing at how you say opacity...but im laughing because you said everyone loves a pink box lolll. awesome tutorial btw

  • @storieswelove4048
    @storieswelove4048 8 років тому

    currently i am obsessed with animations & i was really excited to see you are doing a eries on it! thanks for that! can´t wait or the next video! :)

  • @shahabeskandary6166
    @shahabeskandary6166 6 років тому

    your perfect dude , your presentation just attract me so much and your ability to speak english and make the audience to understand all of the parts of the subject, my english sucks but i understood you very well
    thanks a lot for making this perfect video for free
    best regards

  • @webguru9673
    @webguru9673 6 років тому

    what a style of yours of speaking? love it.

  • @JulianHernandez-zw4ob
    @JulianHernandez-zw4ob 8 років тому

    Bro, you make the best tutorials I've seen. You go deeper into things and talk about performance, and what should and shouldn't be done. You should make an Udemy course, if you did I would probably buy all of them.

  • @AravindBalla
    @AravindBalla 8 років тому +1

    This is the way you teach it! You rock Travis :D

  • @AlvaroLauEgun
    @AlvaroLauEgun 3 роки тому

    Awwww i miss this so much!

  • @raitasorin
    @raitasorin 6 років тому

    You are The best in our Planet Trevor !

  • @JasonLayton
    @JasonLayton 4 роки тому

    Good personality and content. I enjoyed learning with you. Thank you.

  • @TanGuven
    @TanGuven 8 років тому

    every time you teach me new stuff, keep going like that...

  • @devensky00
    @devensky00 8 років тому

    Thanks Travis, you literally saved my life.

  • @MrJLouisS
    @MrJLouisS 8 років тому

    Thank you Travis for your awesome tutorials!

  • @chris.scott510
    @chris.scott510 7 років тому

    Awesome video, love the simplicity!

  • @mikedavies3475
    @mikedavies3475 8 років тому

    Excellent video Travis - thank you.

  • @whipchops
    @whipchops 8 років тому

    THIS WAS EXCELLENT

  • @bobvanboekel1082
    @bobvanboekel1082 8 років тому

    helped me so much, I was looking for that trigger several hours!!

  • @foxlance
    @foxlance 8 років тому

    I have been waiting for this! Damn good one!

  • @PP-yi2ip
    @PP-yi2ip 7 років тому

    Man you are the best!!! Keep going, you are talented as a teacher!!!!! Thank you!

  • @alinawaz4034
    @alinawaz4034 6 років тому

    Amazing best video on transition Love it

  • @asencme
    @asencme 8 років тому

    Very helpful! I mean, I know this, it's not something new, but the explanation is really good and Travis actually gives me some ideas for my own websites with these tuts. Thanks Travis!!!

  • @carolyn_s
    @carolyn_s 8 років тому

    Great video!! Answered a lot of questions!

  • @kaankara1101
    @kaankara1101 3 роки тому

    It was a really good tutorial. You gave good examples of how logic works.

  • @jose17452178
    @jose17452178 8 років тому

    This was a great video. You have a great explanation of how to create CSS Animation!

  • @josema-boy7610
    @josema-boy7610 8 років тому

    Excellent work!!!! Thanks for the help.

  • @nonchalant8473
    @nonchalant8473 8 років тому

    Another awesome tutorial... thanks Travis!!!

  • @JideLambo
    @JideLambo 8 років тому

    css transition just made sense. Thanks

  •  8 років тому

    nice travis looking foward to it

  • @michaelangular2553
    @michaelangular2553 7 років тому

    you're my css hero

  • @ruchaabhyankar
    @ruchaabhyankar 4 роки тому

    Really nice explanation

  • @rafaelgrube
    @rafaelgrube 8 років тому

    Thx Travis! I love your tutorial videos!

  • @mdrafinahmed328
    @mdrafinahmed328 2 роки тому

    this video really best than otherrrrrrrrr

  • @reliancers
    @reliancers 8 років тому

    Thank god for this series

  • @Deprecated446
    @Deprecated446 5 років тому

    Thanks so much! Great breakdown, looking forward to the key frames vid!

  • @ZaffaMan91
    @ZaffaMan91 8 років тому

    Thank you for the awesome video and series Travis, really looking forward to the UX part :)

  • @DharmalingamValaguruitinfo
    @DharmalingamValaguruitinfo 8 років тому

    Awesome tutorial for beginners, Whenever i watched this video really impressed with this way of designing. thank you man !!

  • @woodwoody9083
    @woodwoody9083 8 років тому

    Your CSS tutorial is awesome. Thanks man!

  • @motcon3732
    @motcon3732 8 років тому

    Shit.. Dude! This is the first time i want your video and it is soooo goood!!! Keep up the good work man! Very detailed, very easy to understand!

  • @3mroos4
    @3mroos4 8 років тому

    Awesome tutorial Travis! Keep up the good work! :)

  • @tutorialsuniverse575
    @tutorialsuniverse575 3 роки тому

    Damn... Love the way u teach.... ❤️

  • @diegobeltran97
    @diegobeltran97 8 років тому

    Thanks for your tutorials Travis¡¡ Saludos desde Colombia

  • @hasratsabit7116
    @hasratsabit7116 8 років тому

    Just Awesome!! Thank you very much Travis. You are the man!!!

  • @dani4uro
    @dani4uro 7 років тому

    You are a great teacher!

  • @produdeyay
    @produdeyay 3 роки тому

    i like how he cancel out position at 7:15, then say at 8:35 that you should animate position.

  • @Julliigan
    @Julliigan 8 років тому

    U always save me on my works, thank you Travis (:

  • @rafablum
    @rafablum 8 років тому

    I loved the tutorial! You are very good!!

  • @ramoncristancho337
    @ramoncristancho337 3 роки тому

    Awesome man! Keep it up!

  • @picool13
    @picool13 4 роки тому

    Righty said, even when I first used pointer event for JavaScript in my CSS I just wowed. My reaction was same just like you, why people don't talk about it that much. Pointer event sometimes really helpful.
    I used pointer event none for an icon used inside an anchor or button tag. This is every useful when you add event listener to button or a link with an icon inside. This will stop event bubbling for the element.

  • @malsomalso
    @malsomalso 8 років тому

    This is so great. thank you so much!

  • @dmitxd
    @dmitxd 8 років тому

    this is great as always

  • @sobeyyy
    @sobeyyy 4 роки тому

    I really like your videos and how you explain things and not just code through it. I wasn't able to get my js triggers working since i didn't have jQuery on my local. but great video.! subscribed !

  • @alexc1538
    @alexc1538 6 років тому

    Thanks for this, really helped me out in understanding this styling property :)

  • @samirasoltani7376
    @samirasoltani7376 5 років тому

    Gr8 teaching skill and gr8 lesson as well!

  • @anthonydalessio451
    @anthonydalessio451 8 років тому

    Loved your explanation and just wanted to add something I find really useful when using the transition property. If you want your object to transition one way, and then transition back to its original state a different way, set a transition property on both the original and transition states. In this case the transition property set on the :hover or added class state will affect the transition TO that state, and the transition property added on the original element will affect the transition BACK to its original state. Can make for some pretty cool combinations :)

  • @Pottsy
    @Pottsy 8 років тому +1

    Amazing video man, I've always wanted to l know how to make my elements have a bounce effect I thought it would be done through key frames but cubic bezier makes it much easier! Thanks Travis!

  • @adrianthomas4163
    @adrianthomas4163 8 років тому +1

    You got a new Patreon. Nice work dude.

  • @jerembardonify
    @jerembardonify 8 років тому

    Hey DevTips, thank you a lot for all of these video, it's helpfull and very interresting. Keep going to do what you do ! I share you'r channel with pleasure ! :)

  • @vinaykotturi1283
    @vinaykotturi1283 8 років тому

    seriously! awesome.

  • @aj6986
    @aj6986 8 років тому

    BEST TUTOR EVER!!!

  • @deborahligorio7432
    @deborahligorio7432 8 років тому

    you made my day! thanxxxx

  • @ecmonal
    @ecmonal 8 років тому

    I can't like this video twice... Therefore 5 stars from me ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ 5/5

  • @jcpartri
    @jcpartri 6 років тому

    Ahhhh.... I had the jittering problem on my webpage (I'm flipping cards) and now I know to place the hover transform on the container. :-) Thank you! -Many blessings.
    I learned something today.

  • @Nisa-Julie
    @Nisa-Julie 8 років тому

    Very good tutorial i really love all video you make you look like my teacher.
    Thank you.