Every CSS Animation property

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 พ.ย. 2024

ความคิดเห็น • 89

  • @chunkydotdev
    @chunkydotdev  5 หลายเดือนก่อน

    Hi guys, thank you for all the amazing comments! Love you all! I've got a channel page on ko-fi.com/chunkydotdev where I will be posting updates and stuff related to the channel, would love to see you there!

  • @professornick_
    @professornick_ 7 หลายเดือนก่อน +8

    The way you say it makes everything easier to understand. Thank you!

  • @JayantBB78
    @JayantBB78 8 หลายเดือนก่อน +70

    Really love no nonsense videos like this. No. background music is the best part.

  • @sashank_gl
    @sashank_gl 7 หลายเดือนก่อน +16

    I can imagine the hardwork behind the scenes to put all this information together in a clean manner and I appreciate that!👏

  • @CaptainLian
    @CaptainLian 7 หลายเดือนก่อน +3

    Just an advice on the jaavascript part. Instead of listening to the scroll animation then checking the bounding box each time. Just use the IntersectionObserver API.

  • @johnoneill4146
    @johnoneill4146 7 หลายเดือนก่อน +2

    Good stuff man! This past week I used the scale transform property when hovering over a thumbnail in a show carousel. It looks great and it’s something you see a lot on big streaming sites these days. 🤘🏻

  • @criscutfry
    @criscutfry 8 หลายเดือนก่อน +7

    Holy moly! This is a holy grail of a video! the editing, the knowledge, the whole presentation and method of teaching is so effective, efficient, exciting!

  • @shfahim7938
    @shfahim7938 8 หลายเดือนก่อน +3

    Really good video with no background s***, straight to the point, real examples...

  • @whatidoknow3417
    @whatidoknow3417 29 วันที่ผ่านมา

    I fell in love with you within 2 minutes of this video. I love you! You had everything I've been looking for after going through several 30mins videos in one place. And explained each of them perfectly! Thank you!!

    • @chunkydotdev
      @chunkydotdev  29 วันที่ผ่านมา

      So happy to hear! Thank you! 🙏

  • @athardavid
    @athardavid 7 หลายเดือนก่อน +1

    Good video. Not adding music is the best part

  • @Rian2-ey6yx
    @Rian2-ey6yx หลายเดือนก่อน

    Bro this is a masterpiece i can say

  • @yahyaelganayni4055
    @yahyaelganayni4055 8 หลายเดือนก่อน +1

    This is the best tutorial on CSS animation ever thanks ✌️

  • @Baba6ita
    @Baba6ita หลายเดือนก่อน

    wow I love clearcut explanations

    • @chunkydotdev
      @chunkydotdev  หลายเดือนก่อน

      Thanks mate! 🙏

  • @Strawberry_Htet
    @Strawberry_Htet 8 หลายเดือนก่อน

    Guys support him with likes... He deserves it.❤

  • @ruturajbhandari7695
    @ruturajbhandari7695 8 หลายเดือนก่อน +2

    Amazing quality video. Keep it up 🎉

  • @zenetle
    @zenetle 7 หลายเดือนก่อน

    Замечательная подача материала! Очень полезное видео

  • @muhammad_zohaib936
    @muhammad_zohaib936 7 หลายเดือนก่อน

    I subscribed your channel because of such an amazing content ❤❤ but i want a specific video examples on psuedo elements especially ::before ::after please 🙏🙏

  • @jitizsehrawat2154
    @jitizsehrawat2154 7 หลายเดือนก่อน

    Please make more such videos , this videos was awesome i have a request please make longer videos if possible and please also add projects using btml css and javascript

  • @benjaminjameswaller
    @benjaminjameswaller 8 หลายเดือนก่อน

    Love your style of video. It's short but very informative. Would love to see more even longer ones two. Thank you.

  • @ebrahimtufa-hp3vg
    @ebrahimtufa-hp3vg หลายเดือนก่อน

    Thank you guys keep it up

  • @sivasundarpt
    @sivasundarpt 7 หลายเดือนก่อน

    Simply explained the great things....🎉🎉🎉❤

  • @strip3sIII
    @strip3sIII 7 หลายเดือนก่อน

    This is very nicely done. Thanks for the explanation. 👌

  • @TheRealKukuruz
    @TheRealKukuruz 8 หลายเดือนก่อน

    Wow, can't get easier than this. Great tutorial. 🎉

  • @ManishSinghel
    @ManishSinghel 6 หลายเดือนก่อน

    Loved the format and clear explaination. Can you make one for svg animations as well?

    • @chunkydotdev
      @chunkydotdev  6 หลายเดือนก่อน +1

      Thank you mate! I will put it on my list!

  • @saranshparashar4257
    @saranshparashar4257 7 หลายเดือนก่อน

    Loved the video. Thanks for the info dude!

  • @Sakalakabaka
    @Sakalakabaka 8 หลายเดือนก่อน

    Awesome, thank you for making this video!

  • @emekamgbemere7888
    @emekamgbemere7888 5 หลายเดือนก่อน

    Love your straight forward video. I just subscribed.

  • @thewebstylist
    @thewebstylist 3 หลายเดือนก่อน

    Amazing video n tips n tricks! 🎉

    • @chunkydotdev
      @chunkydotdev  3 หลายเดือนก่อน

      Glad you like it!

  • @UnoUrong
    @UnoUrong 7 หลายเดือนก่อน

    Amazing video! Clear and to the point. Question... Is it just me or there are some browser compatibility issues when using @keyframes? Thanks and cheers all !

    • @chunkydotdev
      @chunkydotdev  7 หลายเดือนก่อน +1

      You are actually correct, named timelines in @keyframes are not fully supported, like "from" and "to" (drafts.csswg.org/scroll-animations/#named-range-keyframes) MDN has a great resource on what currently is supported and where: developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

  • @workforth
    @workforth 8 หลายเดือนก่อน

    Just wanted to say thank you!

  • @nanobii
    @nanobii 8 หลายเดือนก่อน

    Already got some ideas from this!

  • @edems131
    @edems131 8 หลายเดือนก่อน

    Thanks, finnaly i understood css animation

  • @kettenbach
    @kettenbach 7 หลายเดือนก่อน

    Great informative video. Well done 👍

  • @legendaan
    @legendaan 7 หลายเดือนก่อน

    Just subscribed you because of your easy explanation 👍

  • @daspov4709
    @daspov4709 7 หลายเดือนก่อน

    Just best . Nothing more. You got a subscriber

  • @iNT3NS3CLUTCH
    @iNT3NS3CLUTCH 8 หลายเดือนก่อน

    Amazing video dude

  • @szymonschab7249
    @szymonschab7249 6 หลายเดือนก่อน

    Fantastic tutorial.

    • @chunkydotdev
      @chunkydotdev  6 หลายเดือนก่อน

      Thanks mate! 🙏

  • @mayanksati1842
    @mayanksati1842 7 หลายเดือนก่อน

    Thanks dude.

  • @annelih5479
    @annelih5479 8 หลายเดือนก่อน

    Very good!

  • @abdullahmalik3818
    @abdullahmalik3818 8 หลายเดือนก่อน

    Great video ❤

  • @RDAswin
    @RDAswin 6 หลายเดือนก่อน

    very useful bro keep it up ,thanks .👍👍👌👌

  • @alifttoheaven
    @alifttoheaven 6 หลายเดือนก่อน

    Hey man! Can you copy paste the JavaScript to the description? I keep forgetting the if condition

    • @chunkydotdev
      @chunkydotdev  6 หลายเดือนก่อน

      You can find it on github! :) github.com/chunkydotdev/animation-example/blob/main/index.js

  • @mina86
    @mina86 3 หลายเดือนก่อน

    9:00 - might be better done with intersection observers rather than listening on scroll.

  • @מייקלסבג
    @מייקלסבג 8 หลายเดือนก่อน

    thank you

  • @Raapy
    @Raapy 7 หลายเดือนก่อน

    loving your content, its straight forward, i hoping if would you like to add the link of your code .

    • @chunkydotdev
      @chunkydotdev  7 หลายเดือนก่อน

      Thank you! You can check out the code for the last example in the video here: github.com/chunkydotdev/animation-example :)

  • @AlThePal78
    @AlThePal78 6 หลายเดือนก่อน

    i am working on making a floating affect on my list items. I can't seem to get it done even with the help of our favorite chapGPT lol

    • @chunkydotdev
      @chunkydotdev  6 หลายเดือนก่อน

      ah man, seems like css is hard even for chatGPT 😂

  • @junioraftabreshamwale1383
    @junioraftabreshamwale1383 7 หลายเดือนก่อน

    Hey bro im good with all the css animations as well as react and im currently lokking for jobs in front end development so any advice from your side ?

    • @chunkydotdev
      @chunkydotdev  7 หลายเดือนก่อน

      Great question! I think what you need to land a job can vary a lot depending on where you are from, but often it is good to have a couple projects you've built that you can show on your resumé. If you can open source your projects as well, so that the company you're applying to can see your code and get a better feeling of your skills, that's a goldmine. Hope it helps! Good luck with the job hunt my friend!

    • @junioraftabreshamwale1383
      @junioraftabreshamwale1383 7 หลายเดือนก่อน

      @@chunkydotdev thanks a lot my bro actually I have been doing internship since last month and currently searching for full time ...I'll follow the advice given by you and I'll MSG you as soon as I get something 😁. Thanks a lot bro 😁

  • @VideoNOLA
    @VideoNOLA 24 วันที่ผ่านมา

    Like so many other CSS keyframes tutorials, "steps( )", "end" and "start" not mentioned here.

    • @chunkydotdev
      @chunkydotdev  24 วันที่ผ่านมา

      Hey, you're right! Today you actually helped me learn a little bit more about the "animation-timing-function" and I read up a bit on developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function. Great stuff, thank you! 🙏

  • @yamilmsilva
    @yamilmsilva 7 หลายเดือนก่อน

    Where can I get the documentation I would like to follow up with the video?

    • @chunkydotdev
      @chunkydotdev  7 หลายเดือนก่อน +1

      If you want to read more i think mdn is a great resource with examples and explanations: developer.mozilla.org/en-US/docs/Web/CSS/animation

    • @yamilmsilva
      @yamilmsilva 7 หลายเดือนก่อน

      @@chunkydotdev The way you explained was SO GOOD, (I have to say) that topic was something that I was a bit scared and you made It cristal clear, that is why I asked the documentation to follow along and practice…
      YOU ARE A GENIUS.🙏🏼

  • @william5465
    @william5465 7 หลายเดือนก่อน

    good stuff 🥳

  • @galaxygang5055
    @galaxygang5055 8 หลายเดือนก่อน

    Thanks bro

  • @SaadAlShiekhAli-sg4dl
    @SaadAlShiekhAli-sg4dl 7 หลายเดือนก่อน

    you are the best

  • @ItsBarmanji
    @ItsBarmanji 7 หลายเดือนก่อน

    just finished basic CSS, should i get a view of tailwind as I will be shifting to some framework, I can go back and forth to see the differences OFC, or should I just play with CSS more? any advice (typically day of taking advice from rando's in internet)

    • @chunkydotdev
      @chunkydotdev  7 หลายเดือนก่อน

      Good question! I think you are in for a Journey of never ending learnings, so dont be afraid to try tailwind and after som time go back and learn some more css and so on. Follow what interests you and it will be easier to learn stuff 😄

  • @tusharsharma2359
    @tusharsharma2359 7 หลายเดือนก่อน

    Dude you are like a god to me! Please make some more videos like this, people have been waiting for them for years and no one is doing it but you! Keep up the good work and you'll reach the stars!

  • @devabhai11
    @devabhai11 2 หลายเดือนก่อน

    very helpfull video for beginner

    • @chunkydotdev
      @chunkydotdev  2 หลายเดือนก่อน

      Thank you!🙏

  • @spidysense7754
    @spidysense7754 2 หลายเดือนก่อน

    You are 💎

  • @inaminam9080
    @inaminam9080 7 หลายเดือนก่อน

    subscribed bro

  • @oa2766
    @oa2766 20 วันที่ผ่านมา

    What a great video

    • @chunkydotdev
      @chunkydotdev  20 วันที่ผ่านมา

      Thank you! 🙏

  • @EasyCodingDev
    @EasyCodingDev หลายเดือนก่อน

    Bro your video is amazing .But I thought you were going use css only for the scroll animaion becuase it can be done easily with animation timeline:view()

    • @chunkydotdev
      @chunkydotdev  หลายเดือนก่อน

      Cool, haven't heard of it before, i'll check out! Thank you!

  • @frontend_ko
    @frontend_ko 7 หลายเดือนก่อน

    subscribe!

  • @monkshee
    @monkshee 7 หลายเดือนก่อน

    wow

  • @danta.4023
    @danta.4023 2 หลายเดือนก่อน

    subscribed!

    • @chunkydotdev
      @chunkydotdev  2 หลายเดือนก่อน

      Thank you! 🙏

  • @abrarmulla1196
    @abrarmulla1196 7 หลายเดือนก่อน

    I am not the kid meme in the video in the beginning
    And I didn’t watch the full video (saying in a normal tone)

  • @jalaybeewala
    @jalaybeewala 7 หลายเดือนก่อน

    Davie403 ?

    • @chunkydotdev
      @chunkydotdev  7 หลายเดือนก่อน

      🤷‍♂️

  • @studyingwithavibe
    @studyingwithavibe 23 วันที่ผ่านมา

    💤