 Hello, my front-end friends. Look at this, we're in a new place. I'm not going to talk too much about that, but I've moved and here is the new digs that need a lot of work. It's very bare bones right now, but I have my own recording space, so things will probably be changing, setup will be changing over time. I'm trying to fix my audio a little bit, trying to keep the echo down while there's not much in here. But yeah, with that said, I was given a challenge recently by my good friend, Amit Sheen. I was also lucky enough to meet recently, which was really fun. So yeah, Amit has sent me this challenge, and it's a challenge, a CSS riddle, as he called it. And we're going to jump into it in just a second, but if you want, I have linked to the riddle down below, so you can give it your own try at solving it before you watch this. See if you come up with the same solution as me, a different solution. Or you can just of course watch the video and stick around for the ride. I'm recording this intro afterwards, because I had a different intro, but I got really, really frustrated with this one. I went down a hole that did not work at the beginning. And eventually, yeah, just to say that this is, it looks really easy when you first see it, and it definitely was a little bit misleading. I knew it would be a little bit tricky, but keep an open mind if you're trying this one on your own. But yeah, with that, let's check out what the riddle actually is. So here's the question. How do we make the animation slowly speed up when we hover in and slow down before it stops when we hover out and attached is a video? So if we go and take a look, which definitely helps, you can see slowly speeds up. And then when we hover out, it slowly slows down. We need to be able to do it more than once as well, which is important, obviously. And this is what we have now where it's speeding along at one thing. And as soon as we come off, it stops. So let's see how that's done. We obviously, we have our square here. Nothing too important there. I'm guessing that's just centering it. This is setting it up. And here is where we have the animation, which is a rotate to a 360. And because it's infinite, it just keeps on running. And then we just we changed from the pause state to the animation play state of running when we hover. So it actually works. And we need to make this work and slowly go in and out. As soon as he sent this to me, my first thought was, I just changed this away from linear. And before I didn't try it, but I'm pretty sure that doesn't work because it's just going to like muck up everything, basically. So let's just do an ease in out. I mean, you'll see, once that here it is, here's the new one where it goes like that, because the animation will run once, but it eases in and out, in and out, in and out, right? It just keeps redoing that over and over again. So we need to keep this as linear. And what we need to do is find a way to ease into it, keep it running linear, and then ease back out, which I don't actually. So I think, again, we can't muck around the animation itself, because we need that to keep on running over and over and over again. So one thing I know we can do is run more than one animation on something, you can like chain six animations together if you wanted to one thing I've never done is put the same animation twice. So let's do a rotate animation rotate one second. We'll do that. And then I'm going to do a rotate two seconds, two seconds. And basically what this should do is a two second delay, and then run there. And this is just a test. So it run once, two second delay, and then it runs again. So what I'm wondering, instead of having the animation play state here, could we do this where we run it twice? So animation one second ease in so that one's the one that's going to run once only. So any ease in should make it progressively get faster, and maybe like a cubic busier or something there could work better. Then this we can put back to the point five seconds. So that's when it's running. But we only want this one, we can take the linear infinite from here. So basically what we want is it's going to ease in. And then a second later, we switch it over to this version. That seems to have completely broken it. It doesn't work at all. Why? Oh, because here we have it on pause. So we can still do the animation play state of running. That would help. Don't delete that one, Kevin. There. Oh, so no, that didn't work at all. Why not? Actually, I sort of thought, what if I did two seconds instead of one? I really, we had that working. Oh, point five seconds from breaking that, and it was using that as the time. Oh, there we go, speeding up, and then it takes off. So obviously that was too much, but okay, it was working. It was because I didn't have a unit on there. We mucked everything up. So now it will speed up. We're halfway home. So the first time it runs, if I refresh the page, now it will work. But part of this is that we should be able to come off. It needs to slow down, but then I need to be able to go back on. And the problem is it's going back to like this first version before it goes back to that one, I guess. But there are, I don't know why. I don't know exactly what's happening. I'm not good enough with animations. It's resetting it to the zero, and nothing is happening yet. So it's just sort of stuck there, I think. And it's already done that one, maybe. I'm not sure, but that didn't work. And then let's just pretend it was working. How can I have it when we come off that it keeps going? Because one thing, we have the pause state here. We can't do a lot with that, because there's playing is the other one, playing is the default or paused and pause is a useful one to have. This would be a nice one that if we get to animate it, but there's no way of animating that or transitioning it or anything like that. So that won't work. That much, I know, I could potentially break this into multiple animations, but I'm sure that would do the exact same thing, where it just wouldn't actually change anything. It would be the exact same problem we're having now. I'm so high. It looks so good that first time right there. That was perfect. And then everything breaks. Okay. When we come off, we have a property that can't be animated. And there's different things with animating properties. And this is one of those ones, like some you can actually give. Well, we can't add actually, one second, you can't animate it, but when we transition, because if something's not animatable, it doesn't mean that it can't switch between them. There's a word for it that I can't think of off the top of my head to do that. Or like it can't actually transition from one thing to the other. But what it does is it sort of switches halfway through the animation that you're giving it. So could we do a transition of animation play state at 0.5 seconds, or one second, and then it should switch in the middle of that. If that worked, I know it's not working, because what would happen is when I do that, it would actually take half of this much time to do anything. Right. Yeah, I'm pretty sure it's just not something that can be animated at all. I don't even know if that would have helped actually. So we need it spinning and then to slow down from spinning, spinning and then slow down from spinning with JavaScript. This wouldn't be too difficult without JavaScript. What we could do is you're using your mouse in, mouse out. As soon as the mouse comes off, you can change the class that's on there that would just put another animation on that would slow it down. And then you put when you go back over, it speeds it back up. But Amit wants me to do this without the script. Two hours later. So after staring at this for a really long time and not knowing what to do, we're back to square one. I'm really stuck on how to do this, but we're going to get through it. And I want to start thinking about it in a different way. I was basically staring at exactly what I had. It was going nowhere, and I just think that whole, I thought we were going down the right route with running an animation differently, but it wasn't the right route. So I think the solution now is to try and find a different solution. It's one of those things where I could layer more and more on top of that. It's always something I say if you're stuck, if you're trying to solve a problem with CSS and you're putting lots of layers on top, it's just like putting a band-aid on top of a band-aid, it doesn't actually work most of the time. The first band-aid is not working, the next one won't be working either. So back to square one. Get rid of everything and try and start over and come up with a different solution. And right now, trying to run different animations, it worked in one direction, but only if I have it once. So I think I'd need so many different layers there, and I don't think any of them would work. So we're starting over again. It would probably be a good idea to take a complete break, walk away from this and come back, but I want to power through it. The hardest part with this is this pause to running. So we need this to be running. I can't change that. I need that just on full movement mode. And then the other thing with it is it does need like when we come off, we don't want it to reset, it needs to stay where it was. Let's try this. Body. Rotate zero degrees. Body has a hover. Rotate 180, and yeah, let's do 180 because I don't even know if this would work. So that's fine. Something glitched there. So I think it worked. Let's just turn this off for a second. If I can't do the different animation, see there it flipped. Oh, there's a Twitter bird flying around too. So if the body is what's turning, instead of the thing inside the body, so the body's going like that, we'd still run into the same problem. What if when we're hovering on that item, I don't even need has here. We could just do this. Body, hover, right? The has is useless there. Oh, no, no. The has is useful there. Sorry, because we want to rotate the body if I'm hovering on a direct child. So if we hover on that and then the body turns, my brain's not grasping what I'm trying to do. The body's turning. Would that help us? Oh, wait, wait, I did something like this a while back. Rotate. I did that. It wasn't exactly like this. Transition. Rotate one second. That's not working. Not working. I'm getting scroll bars. But there's something good happening here, which is that we're actually getting a transition when I'm not hovering, which was the hard thing. So I did something like this in one video where I had like a ball with rotating orbs around it, but there was text in the orb. So like the parent had to be rotating and then the orbs actually had to be reverse rotating to get the whole thing to work. So this is sort of the same idea that what if we did it negative 360? Reverse rotate it. Something good happened there. Is it my timing that's off? Because look, it's funky, but it has like a starting animation. And it's not the right one, but it has an ending animation. Transition. Oh, wait, if we did an ease in with that help, because I think the default ease, so it sort of speeds up and then slows down by the end of it, whereas now we can just speed it up. That's still weird. Ease. That's it. We got it. Minus the scroll bars. So, okay, what's happening is I got it. Okay. I don't know if we're allowed this, but I'm going to do a square wrapper. I'm trying to get away from using container as much because we have container queries now. So this, let's take that and put that on the square wrapper. And then this will go right here. So, okay, wait, it stopped playing that. Was that just chance? It was. And I can do it again. We got there. Okay. That's awesome. Yes, yes, yes. So why this is working is let's put a outline one pixel solid blue. Just so we can see it. We'll do five and orange to make it easier to see. So what's happening is that runs the animation. Now it's spinning. And this is why this works because it's spinning and spinning and spinning. And then as soon, okay, we'll forget about the beginning of it. But what's happening here is it's spinning and spinning and spinning. And then when I take it off, the square completely stops. It goes into the pause state immediately. But because we have this transition here, the parent spins and slows down because it's in ease out. So it starts fast and then slows down as it's going on. So it does its thing there and it eases out. And at that point, it's at a full negative 360. So it's going back to the zero. So it's like reverse spinning, I guess, whatever, I don't care. And then it's the same thing the other way around. It's starting really fast, but the parent is reverse spinning and the reverse spin is slowing down. So that means like I'm spinning one thing this way. The other thing spinning the other way. And at the beginning, they're probably going about the same speed, but then the parent is slowing down. So it looks like the child is accelerating when that's not actually what's happening. Was I allowed to add in another element? I don't know, but I see this as having solved the riddle. All right, I thought that my solution was as good as you could get. But then I went and asked Amit about it. And it turns out that you can have, I said, are you allowed to change the HTML? He said, you can, but you don't have to. And that got me wondering. So, yeah, it got me wondering. And take off these. We don't need that. We can go back to having one element. And I found the trick already was because I had the rotate on here, right? Because we're using a, the transition is dealing with the transform. And by using the rotate property here, that means I could, I could just say that we're going to transition that one when we have her. Basically, what we're doing is now we're reverse rotating while we rotate. And then the same thing. So it's exactly what we had before, but we're doing it on the same element, which is wild. And that's something I ever would have thought of. So and that's again, because this is a transform rotate, which is a different property from the rotate property itself. And in a way, after he told me that we could do it without it, this, I immediately clicked because when I did meet him, he told me he was working on a talk on dealing with the rotate property or the transform properties that are now their own properties. And I went, wait a second, he probably came up with this for part of that time. I'm guessing maybe it's something that's part of it. And really interesting that you can rotate and reverse rotate something at the same time. I never would have thought of it. Really, really cool that you can do that. Don't know the practical use cases other than something like this, where you can have the animation going. Anyway, really cool. And yet, if you enjoyed this video and you want to see me working my way through another problem, no less of a riddle type of thing. There's a video here, you'd probably really enjoy. And with that, I would like to thank my enablers of awesome who are Michael, Simon, Tim and Johnny as well as all of my other patrons for their monthly support. And of course, I'd really like to thank Amit as well for sharing this. And even though I was very frustrated, it's one of those things that once you figure it out, you're so happy. And of course, until next time, don't forget to make your part of the internet just a little bit more awesome.