I never thought of using CSS animations like this before!
HTML-код
- Опубликовано: 5 июн 2024
- 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 RUclips 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!
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. 👌
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
are you sure that's a quadratic??
only those with notifications on know the thumbnail originally said "animtion" lol
oops!
Yea, saw the idea for the solution in the thumbnail, so it wasn't really that much of a challenge :p
I had notification but didn't nice it lol
well, and those who read your comment, i guess.
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%;
}
How elegant!! 🤩 I love it! ⭐
Creative!
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.
Yup, definitely could have :)
Awesome! You never cease to amaze me with your elegant solutions. ❤
Kevin is a combination of a calm pleasant voice + great explanation + vast extensive knowledge of the subject
Very interesting concept.
Thanks Kevin!
8:22 this got me bang my head against the wall out of frustration
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
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
This is very cool! Definitely going to use this
This is a useful concept! Thanks!
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.
Very cool. Thanks!
This is awesome! Thanks!!!
This is a fantastic technique!
That's was awesome, I didn't know about "forward/reverse"😍
This is extremely handy to know thank you!
So much potential with this one!
i fell like i leveled up with a really powerful technique, thanks kevin!
Thank you, Kevin!
Wow what a great solution! Might be very useful for me thank you 🙏🏼
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" ;-)
Kevin, very nice! Thanks
You are such a good educator, dude.
Ohh, Imma do a cyberpunk style one. Thanks for the video! Really interesting effect with an elegant solution ❤
Brilliant!
Beautiful
So dang nice!
thats beautiful. never fully understood css animations (still dont), but this gave me a bit more insight
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.
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.
So, in the end, should we care about that? Or leave it as it is because it's not noticeable? or it depends?
@@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.
@RandomGeometryDashStuff 's answer doesn't have this issue 😲
that's pretty cool and interesting
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.
Amazing ❤❤
You are my css master❤
sooo satisfying
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.
Very cool trick.
Learned something new today
You should really check out more of Ana Tudor stuff. She's a CSS wizard.
I've followed her for a long time ☺️
thank you
Really cool animation! Only one little thing: You don't need the "forwards" key on the exit animation
Eventhough I recently learned that you are saying "Hello my frontend friends", I still can't unhear "Hello my friend and friends" lol
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.
you are A GEM
Great .. very Cool
I was trying to solve this with js and didn't even know how to google this type of thing😅Thanks!!
If it was css only, it would be incredible. Love when css replace js in some popular cases😊)
very nice
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.
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
the solution was always 'forward' ..
thank you very much for the video
Reminds me of the tunnel bear login page :)
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
I’m more intrigued with these variable values. Can css vars be updated directly with js???
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.
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
Cool
i LOVE your shirt
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?
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)));;
}
I wonder what the reason for other styles being placed within @layer?
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.
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?
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.
I just did something similar a few days ago!
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.
I gave this a Power Like by pressing my mouse button really hard while clicking the Like button.
Wow
There is no way to do it completely without JS right? I.e. css doesn't have a crazy hidden mouse pointer var right?
whoa:0
.animate() and fill: forwards makes this easy
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.
Wouldn’t a simple transition as exit work instead of an extra exit animation?
I learned this in a meta front-end professional course
Especially in the html & css indebt , thanks for refreshing my memories
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!
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 )
@@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!
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 :) )
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?
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
@@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;
}
@@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
.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.
At the risk of sounding lamen, what software are you using for coding Kevin. I don't recognise that terminal
Why use :before for the animation instead of the element itself? Is there a reason or was this an implementation thing?
I was wondering about this as well.
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 :)
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
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)
But I haven’t checked, just top of my head
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 ☺️
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 😮
Frontend friends
@@seanthesheep Thank you so much!!!
lol, css has signals when all around only trying to implement them
cAn i learn cSS In 1 month can you give me a PlAylsit
That playlist doesn't exist.
You learn by doing, and every day you'll learn something new.
I'm curious - what did your face add to this video? Why is any meaningful fraction of the video?
I agree, I don't understand what the point is
Weird thing to say.
the moment you said java-script I lost interest. Obviously with java-script you can do anything
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.
PascalCase is usually for class names thats why underscores and dashes are used
Either way it doesnt really matter
@@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.
Man, i am just learning css for now.
Not easy.
Next will learn js.
How you gonna learn all these advance stuff?
It is overwhelming.