CSS Animations are PAINFUL

Check out the CodePen: codepen.io/dotSDV/full/oNRRpBg
Figma: www.figma.com/community/file/...
Check out my other socials:
- Tiktok: / dotsdv
- Twitter: / dotsdv
- Ko-Fi: ko-fi.com/dotsdv
00:00 Intro
00:12 The Static Element
00:56 The Hover Animation
01:48 The Click Animation

[@shreyash1]

you're the second css youtuber that I am going to see emerging from 0.

[@dotsdv]

Glad to have you along for the journey!

[@sakthikumaran8076]

Thanks for the TH-cam recommendation to let me know about this guy!

[@dotsdv]

Hope you enjoyed the video!

[@indie_war]

nice one can't wait for other CSS video from you

[@dotsdv]

Thank you! I'm planning to have another one out next week!

[@khalidyare7036]

I really wanna learn css animations from you bro. Im glad youtube suggested me your account

[@dotsdv]

Thank for watching! Let me know if there's anything in particular you would like me to cover!

[@holypizza1]

Straight to the point, thanks alot

[@dotsdv]

Thank you! Hope the video was helpful!

[@user-uc5kl1dw7i]

I'm new at this but i got almost every step. Could you consider highlightning or underlining the properties that are making the changes as you talk about them? (i'm not an english speaker, so that'd help a lot)

[@dotsdv]

Thanks for the feedback! I'll start doing that so it's easier to follow along

[@xsdash]

Pro quality content. Keep it up.

[@dotsdv]

Thank you!

[@ARBESProductions]

Really cool break down of the process and nice results!
Any reason why'd you choose JS event for hover instead of CSS ::hover property?

[@dotsdv]

Thank you and great question! :hover would work as well, but since I used @keyframes the animation would stop abruptly when it leaves the hover state. If it was a simpler animation done using the transition property, then it would stop smoothly since it's just transitioning between property changes. Using the JS event, allows me to keep it in the hover state until the animation ends, which results in a smoother animation

[@ARBESProductions]

@@dotsdv Awesome! Thanks for explaining it. You just earned a subscriber, sir.

[@dotsdv]

Thanks for subscribing! It means a lot to me!

[@KHe3CaspianXI]

I use tailwind CSS, peace of mind without BEM.

[@dotsdv]

Tailwind is great! I personally don't love using it because having too many classes can be confusing to me at times. I prefer using BEM, it keeps my HTML clean and I usually style with SCSS so it makes writing the styles easier and neater

[@hanzo7616]

I gave up on them. They are so bad. Will use GSAP until they improve which I'm sure they will. CSS keeps improving. So that's a plus.

[@dotsdv]

Yeah I really need to learn GSAP, CSS animations can be pretty annoying to use sometimes

[@NirajSalunke]

Use GSAP , DO Nothingggg .

[@dotsdv]

Haha yeah, I've worked on a few projects that've used GSAP but I still need to learn it myself

[@NirajSalunke]

@@dotsdv try using it( even I am rookie in it) it has massiv power and best performance!

[@dotsdv]

For sure! I'll give it a try!