I never thought of using CSS animations like this before!

Подписаться 914 тыс.

Просмотров 68 тыс.

50% 1

Looking to step up your CSS? I have free and premium courses: kevinpowell.co/courses?...
🔗 Links
✅ Start here: codepen.io/kevinpowell/pen/Ba...
✅ Finished version: codepen.io/kevinpowell/pen/Ex...
✅ Mattew Morete’s Codepen: codepen.io/matthewmorete/pen/...
✅ Ana Tudor’s Codepen: codepen.io/thebabydino/pen/gO...
✅ The button video: • Fun button effect with...
✅ The button’s codepen: codepen.io/kevinpowell/pen/LY...
⌚ Timestamps
00:00 - Introduction
01:00 - Why we can’t use a transition for this effect
01:42 - Why I wanted to be able to do this
02:35 - We could use JS for this
03:24 - Can you come up with a CSS-only solution?
04:05 - Where I got my final solution from
04:35 - The CSS-only solution
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

5 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 124

@RobinPoort Месяц назад

Another great use for an animation with forwards is when you add a class with JS to make an element go from display: none; to display: block;. A transition won’t work here since the display value changes however an animation using forwards will kick in nicely. Great for a dropdown of any kind. 👌

@spicybaguette7706 Месяц назад

That's so interesting! What's also cool is that if you move your mouse in a line at a constant speed, and it enters the box, the dot traces out a quadratic curve. Because the CSS animation linearly interpolates between (0, 0) and (--x, --y), and you moving the mouse is also a linear motion

@nikilragav 26 дней назад

are you sure that's a quadratic??

@pineappleanimates Месяц назад

only those with notifications on know the thumbnail originally said "animtion" lol

@KevinPowell Месяц назад

oops!

@rodneymkay Месяц назад

Yea, saw the idea for the solution in the thumbnail, so it wasn't really that much of a challenge :p

@iamtharunraj Месяц назад

I had notification but didn't nice it lol

@blauergrashalm4201 Месяц назад

well, and those who read your comment, i guess.

@RandomGeometryDashStuff Месяц назад

03:34 here is my attempt solving (assuming not allowed to edit javascript): .hover-box::before{ /*offset-path can be simpler if allowed to edit javascript*/ offset-path:polygon(50% 50%,calc(var(--x,0px) + 50%) calc(var(--y,0px) + 50%)); offset-rotate:0rad; offset-distance:0%; transition:offset-distance 500ms; } .hover-box:hover::before{ offset-distance:50%; }

@ste-fa-no Месяц назад

How elegant!! 🤩 I love it! ⭐

@lgasc Месяц назад

Creative!

@maximebarzel9701 Месяц назад

Great solution! To simplify further, I think you can omit both "translate: 0 0" since they represent the default state. Just include an "enter" to and an "exit" from.

@KevinPowell Месяц назад

Yup, definitely could have :)

@ismailcreatvt Месяц назад

Awesome! You never cease to amaze me with your elegant solutions. ❤

@LasTCursE69 Месяц назад

Kevin is a combination of a calm pleasant voice + great explanation + vast extensive knowledge of the subject

@ahmad-murery Месяц назад

Very interesting concept. Thanks Kevin!

@ApprendreSansNecessite Месяц назад

8:22 this got me bang my head against the wall out of frustration

@KevinPowell Месяц назад

Yeah, definitely one of those animation gotchas, to go along with 0 requiring a unit for the timing, unlike in most use cases in CSS

@nikilragav 26 дней назад

Cool. This is actually slightly broken - it's obvious if you slow down the animation to 1000ms. If you enter, exit, enter before the animation is fully finished, you'll see some jumping. I think you need to save the last x,y of the circle upon exit via js and upon entry enter animation from last x y, to current x y exit animation from last x y to 0 0

@billyvg Месяц назад

This is very cool! Definitely going to use this

@Diamonddrake 26 дней назад

This is a useful concept! Thanks!

@refeals Месяц назад

pretty clever solution! css animations are awesome 1:40 my first thought here was to add a selector without the hover to set the transition off, meaning the transition works one way when there's a :hover and another way when there's not. I already did some things that way, so I know it could work. but i'm not sure it would work for this problem exactly.

@zsteinkamp Месяц назад

Very cool. Thanks!

@farhan-app Месяц назад

This is awesome! Thanks!!!

@KeithGrant Месяц назад

This is a fantastic technique!

@Risha1792 Месяц назад

That's was awesome, I didn't know about "forward/reverse"😍

@LokiDaFerret Месяц назад

This is extremely handy to know thank you!

@Ma1ne2 Месяц назад

So much potential with this one!

@Rtzoor Месяц назад

i fell like i leveled up with a really powerful technique, thanks kevin!

@austinkern8358 Месяц назад

Thank you, Kevin!

@omrividal Месяц назад

Wow what a great solution! Might be very useful for me thank you 🙏🏼

@FjorimDerHuene Месяц назад

Very cool! A funny thing, though, is that the original solution (the one the guy "stole" it from from whom you "stole" it from) says in its code "do not share this!" and in its title it's a "secret" ;-)

@danielmadison4451 Месяц назад

Kevin, very nice! Thanks

@ajgubi19 26 дней назад

You are such a good educator, dude.

@Nekroido 27 дней назад

Ohh, Imma do a cyberpunk style one. Thanks for the video! Really interesting effect with an elegant solution ❤

@Tom-og3fr Месяц назад

Brilliant!

@pimredrum9375 Месяц назад

Beautiful

@RobertMcGovernTarasis Месяц назад

So dang nice!

@lesarXD Месяц назад

thats beautiful. never fully understood css animations (still dont), but this gave me a bit more insight

@UltraMarlin Месяц назад

This is a pretty neat technique, thanks for sharing! This might be nitpicky, but unfortunately the animation still jumps if you exit the hover state before the enter animation has finished playing. You can see this if you quickly move your mouse in and out of the square in the "Hover follow finished version" codepen. In most cases this probably won't be noticeable, but it would still be cool to figure out a solution to this.

@KevinPowell Месяц назад

Yeah I know. I don't think there's a solution to that though, at least with this technique. Like you said, in most actual use cases you wouldn't notice this.

@goodshiro10 Месяц назад

So, in the end, should we care about that? Or leave it as it is because it's not noticeable? or it depends?

@CottidaeSEA Месяц назад

@@goodshiro10 I don't think there's a good solution outside of JS for now, so if it matters then using JS animations is probably the way to go.

@ste-fa-no Месяц назад

@RandomGeometryDashStuff 's answer doesn't have this issue 😲

@penguinxed Месяц назад

that's pretty cool and interesting

@Dakingsworld Месяц назад

Amazing ❤❤

@anandv1391 26 дней назад

You are my css master❤

@MrSofazocker 28 дней назад

Hm... Transition would still be preferred, if you move your mouse outside the boxy before the animation finished playing, the exit animation will always begin with the mouse position. So after a short hover, it jumps from its current position to your mouse, then animates back to the center/starting position. That's why we use js animation since css doesn't retain state. Better solution: Have the naive implementation of a transition translate 500ms. on the before element. And --x, --y on the :hover state. To get rid of the transition/lag once the ball reached your mouse, aka the durtation of the transition. Make the "enter" animation, animation to transition 0ms. You're welcome.

@treedruids5776 Месяц назад

sooo satisfying

@user-zh5kg2op4h Месяц назад

CSS animations are great for things like animated appearance of elements. In order to use transitions one need add an element to DOM with initial state, and then change it properties in the next moment, so that there would be a transition between states. Animations help to avoid that extra step - they just play from the start. However, there is one caveat with them: I don't recommend to mix animations with transitions - Safari starts flickering in that case. Use only one approach on the same element or nested elements.

@jonmayer Месяц назад

Very cool trick.

@nadavgover6017 Месяц назад

Learned something new today

@3dfactor 29 дней назад

You should really check out more of Ana Tudor stuff. She's a CSS wizard.

@KevinPowell 26 дней назад

I've followed her for a long time ☺️

@utjok Месяц назад

thank you

@TristanGrimaux Месяц назад

Really cool animation! Only one little thing: You don't need the "forwards" key on the exit animation

@Voidstroyer Месяц назад

Eventhough I recently learned that you are saying "Hello my frontend friends", I still can't unhear "Hello my friend and friends" lol

@cyberprompt Месяц назад

pretty good timing. i'm working on an app that uses canvas (fabric.js) that is a specific editor to load background and transparent foreground images. This part could be used to augment the current "eraserbrush circle" that follows the cursor when active. Once i get all the bugs out... I might sweeten the UX with this tidbit. thx.

@krateskim4169 Месяц назад

you are A GEM

@vivekv4250 Месяц назад

Great .. very Cool

@vasyaqwe2087 Месяц назад

I was trying to solve this with js and didn't even know how to google this type of thing😅Thanks!!

@TheMrArmbull 21 день назад

If it was css only, it would be incredible. Love when css replace js in some popular cases😊)

@SXsoft99 Месяц назад

very nice

@SvenThielen Месяц назад

A really nice animation effet. The only issue with this code is when you move very quickly in and out of the hover box. Instead of moving back to the edge from where it was when it was returning, it will instead jump back to 0,0 then move to the edge again. So a quick move in and out of the box cause some glitching.

@KevinPowell Месяц назад

Yeah, I don't think there's a way around that with this method, but for more subtle versions it's okay. If you need it to be more like I did here, some more JS would be needed, I think

@veemy23 Месяц назад

the solution was always 'forward' .. thank you very much for the video

@andrejwalilko634 24 дня назад

Reminds me of the tunnel bear login page :)

@LePhenixGD Месяц назад

3:40 I would've used the Animation web API to handle the behavior, I have no idea on how to do it in CSS lol

@mixxxer 19 дней назад

I’m more intrigued with these variable values. Can css vars be updated directly with js???

@aaaidan 27 дней назад

Can you use a transition to drive animation-delay? If so, it might be possible to have the “playhead” between 0 and var(--x) be smoothly interpolated when you hover and leave. Not sure if this can work.

@gorilla-san 26 дней назад

Cool stuff. I would assume that variables would be replaced with their current values at the start of the animation and the animation would stay at those numbers, and not continue to be connected with the variables

@anandv1391 26 дней назад

Cool

@MaximilianoBernasconi Месяц назад

i LOVE your shirt

@aamiramin6112 Месяц назад

Kevin why the coordinates of X and Y is change (its not working like its when I remove display:grid? I want to know why its giving correct axis only in display:flex and display:grid?

@aaronlink127 Месяц назад

I tried my hand at this and ended up with a totally different solution. I basically made an intermediate "cursor influence" property that I then can transition. But, it needs additional math, plus @property. @property --cursor-influence { syntax: ""; inherits: true; initial-value: 0; } .hover-box { transition: --cursor-influence 500ms; &:hover { --cursor-influence: 1; } } .hover-box::before { translate: calc((var(--x) * var(--cursor-influence))) calc((var(--y) * var(--cursor-influence)));; }

@XCanG Месяц назад

I wonder what the reason for other styles being placed within @layer?

@AScribblingTurtle Месяц назад

What I'd like to know is. what happens under the hood, when you use "forward". Does CSS just replay that last frame over and over again or does it only replay it, if one of the variables change.

@bizmich_ Месяц назад

Hi Kevin! I have a question regarding CSS layout. I have a card element with overflow: hidden. However, a rounded close icon within this card is partially cut off. How can I solve this issue?

@MaxFunoff Месяц назад

Interesting solution, might be useful for me, I thought about applying transition on non ::hover and then unset it on ::hover but then it jumps when u hover in but does not jump when u hover out, so yours is better.

@rrd_webmania Месяц назад

I just did something similar a few days ago!

@tristan_nolan Месяц назад

Is it possible to avoid the glitchiness when briefly running the cursor across the corner of the box? The ball begins animating to the xy coordinates but doesn't complete it in time. So then when the animation completes it instantly jumps to those coordinates so that it can animate back to the zero position. I can't quick think of a way to make this possible.

@kacCid Месяц назад

I gave this a Power Like by pressing my mouse button really hard while clicking the Like button.

@sheldonfourie5959 Месяц назад

Wow

@andreasnulein782 Месяц назад

There is no way to do it completely without JS right? I.e. css doesn't have a crazy hidden mouse pointer var right?

@nocluebruh3792 Месяц назад

whoa:0

@smolboye1878 27 дней назад

.animate() and fill: forwards makes this easy

@sthanuchowdhury8440 Месяц назад

Sir, i am a beginner in Css and html, i am only 40-50 days in css and html after my boards exams. So i am having trouble with Css Focus selector, i have tried searching about this topic distinctively on youtube, but only your guide on Css focus, i have got. So i request you to make a full video on Css focus selector with its real life application to animations and stuffs like that.

@lucavogels 29 дней назад

Wouldn’t a simple transition as exit work instead of an extra exit animation?

@ogbuleo2048 Месяц назад

I learned this in a meta front-end professional course

@ogbuleo2048 Месяц назад

Especially in the html & css indebt , thanks for refreshing my memories

@ptolemny Месяц назад

I'm new to HTML/CSS, so this might be a dumb question, but I'm wondering if there is a way to make it so that the animated element will follow the mouse, but only within a certain radius, say 50px or something like that, and once the mouse pointer moves outside the radius from where it "picked up" the animated element, the element will then return to its starting position? Hopefully I explained that correctly. Thanks!

@KevinPowell Месяц назад

You'd probably have to do most, if not all of that, through JS.... So yes, it's possible, but with CSS, :hover is :hover, so it's either on or off and we can't have thresholds like you're describing. We can use clamp() to prevent it from "escaping" beyond a certain point, but it won't reset when the mouse goes beyond that point without the help of more JavaScript (here's an example of using clamp() - codepen.io/kevinpowell/pen/oNOVjgE )

@ptolemny Месяц назад

@@KevinPowell Thanks for the reply. I'm trying to do a parallax effect-type thing, but not using scrolling. Anyways, your videos are very helpful and I just realized I wasn't subbed, so I corrected that. Cheers!

@MichaelHitzelberger Месяц назад

There's only one type of situation that makes the dot jump: If you leave the square before the dot has reached the mouse pointer, the dot jumps to the edge of the square to then return to the middle via the animatíon. Would there be a CSS-only way of eliminating that effect? (I know it's a very small edge case :) )

@aamiramin6112 Месяц назад

Kevin, when I remove the display grid it's not getting the correct coordinates why? I mean only display:flex; or display:grid is working I want to know why? Why not the default display:block works?

@KevinPowell Месяц назад

It's how I set it up, since I've got it to be working from the center. If you don't have it centered (which it won't be if you take off grid), then you probably have to update the JS to remove the /2 stuff

@aamiramin6112 Месяц назад

@@KevinPowell Its still not working. I removed the display:grid; and in js remove the /2; Its like: const centerX = hoverBox.offsetWidth; const centerY = hoverBox.offsetHeight; and css: .hover-box { /* display: grid; */ width: min(600px, 70%); margin: auto; aspect-ratio: 1; border: 3px solid hsl(200, 100%, 50%); border-radius: 0.5rem; box-shadow: 0 0 0.5rem hsl(200, 100%, 70%), inset 0 0 0.5rem hsl(200, 100%, 70%); overflow: hidden; }

@aamiramin6112 Месяц назад

@@KevinPowell I'm struggling to find out the reasons why its working for only grid and flex? like whats the difference between in calculation if we use flex or grid and if we use block there is probably a difference in calculating the offsetWidth or offsetX

@slowpankha Месяц назад

.hover-box:not(:hover)::before { transition: translate 250ms ease; translate: 0; } This works for me. Is this correct or am I missing something? This feels simpler than adding keyframes.

@dweebyllo8615 19 дней назад

At the risk of sounding lamen, what software are you using for coding Kevin. I don't recognise that terminal

@DennisHoskins Месяц назад

Why use :before for the animation instead of the element itself? Is there a reason or was this an implementation thing?

@asappi3110 Месяц назад

I was wondering about this as well.

@KevinPowell Месяц назад

In this case, the element is a div with the blue border on it, and the red thing in the middle is the pseudo-element that I created with ::before, so the animation in on the thing I'm animating :)

@InYourFace7861 8 дней назад

I'm probably missing something obvious here, but can't you just constantly have translate: var(--x) var(--y); and then set --x and --y to 0 when the element isn't hovered? As you're already using js to update the vars

@onkelhoy1 29 дней назад

Wouldn’t “backwards” work? I mean you demonstrated forwards and compared it with reverse but they are not the same, forwards is fill mode and reverse is direction. I think even reverse with forwards could work or simply just backwards (full mode)

@onkelhoy1 29 дней назад

But I haven’t checked, just top of my head

@KevinPowell 26 дней назад

If you don't change the name of the animation, it won't run again, sadly. Or well, I don't think so, that's off the top of my head too ☺️

@ianantonius7287 Месяц назад

what is your greeting at the beginning of the videos, I can't understand the words, "hi there my friend and friends?" It is beginning to get on my nerves. Please help me 😮

@seanthesheep Месяц назад

Frontend friends

@ianantonius7287 Месяц назад

@@seanthesheep Thank you so much!!!

@aspirine17 Месяц назад

lol, css has signals when all around only trying to implement them

@faiyazrasul2050 Месяц назад

cAn i learn cSS In 1 month can you give me a PlAylsit

@RabahTaib-mn4fs Месяц назад

That playlist doesn't exist. You learn by doing, and every day you'll learn something new.

@Dyanosis Месяц назад

I'm curious - what did your face add to this video? Why is any meaningful fraction of the video?

@Tikolu Месяц назад

I agree, I don't understand what the point is

@aesthet1k_ Месяц назад

Weird thing to say.

@TommyLikeTom 18 дней назад

the moment you said java-script I lost interest. Obviously with java-script you can do anything

@FatheringLessons Месяц назад

Please don't use hyphens and underscores in names. It's ugly, confusing for noobs, and just bad style. I recommend just going PascalCase for everything. Cool trick though.

@miguelcabaero5843 Месяц назад

PascalCase is usually for class names thats why underscores and dashes are used

@miguelcabaero5843 Месяц назад

Either way it doesnt really matter

@FatheringLessons Месяц назад

@@miguelcabaero5843 It's best to use the same convention for all names. Rather than: thisForOneThing ThisForAnother _thenThis _AndThis _or-even-this and-this-too Just messy and ridiculous.