A quick & fun CSS animation effect

A quick and fun little CSS animation 🙂

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[bhishek_]

Hi kevin sir, please cover
:focus,
:focus-within
:focus-visible

I am getting confused, please cover these topics in your next short

[stretch]

I used a version of this to create an animated line under hyperlinks as a way to show its clickable. Great stuff Kevin!

[mohamedhamdi]

You always come up with this amazing stuff

[jotasenator]

Awsome!!! I replicated it in a sandbox. thaks profe. More to come!

[fgsaldanha]

Nice effect. I achieved something similar once by using linear-gradient and tweaking background position and size at hover

[korgan]

From my point of view it is easier to make this kind of animations transitioning the background.
You can create a gradient with hard color stops. Set background width 200% and use percentages to set background position per state.

[ahmad-murery]

isolation, this is new to me,
Thanks Kevin!

[sayeghjoe]

Simple - but only because you’re an awesome teacher. Thanks for sharing Kevin 🙏🏻

[vikingthedude]

This type of content works really well in shorts

[Istian_Ikes]

I'm actually going to use this on a project I'm working on right now, thanks.

[DeepThinker]

Interesting. I made a bunch of animations using background color instead of the :after attribute sometime ago. I just find it easier to change the color in one place.

[QwDragon]

Cool! Seems like I would've made more complicated solution...

[Synceditxboxoffice]

key points:

position
transition
tranform origin
scale 😊

[adenbinfarrukh]

Nice, one more animation up my sleeve 😁.

[jaferali]

very good tip i didn't think about it 👍

[oz]

Dude I saw your name explicitly mentioned as a requirement in a job description.
"You have watched all Kevin Powell videos". 🤣

[ednh]

So one of the good reasons to use isolation isolate is when we're going to set negative z-index on its pseudo elements?

[Spkz]

Hi, Kevin! I've been a huge fan of your content for a while now. May I ask, what purpose does 'isolation: isolate;' serve in this case? If I recall correctly from your videos, I believe that putting 'position: relative;' on the button already creates its own stacking context - and since the pseudo elements created are derived from the button, shouldn't negative 'z-index' already work without it bleeding out - making 'isolation: isolate' redundant? I made a pen myself with your code, and to me, removing the 'isolation: isolate;' does not make a visible difference. Please correct me if I'm wrong, I'm just genuinely curious. Thank you for your answer in advance!

[SkyInfinity]

A little question, why you use "scale" property instead of "transform: scale()" ? Thanks 🙂

[TheStickofWar]

How do you even come up with these. Wow