I've been challenged to solve a CSS riddle

Key Takeaways

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 try and keep the echo down while there's not much in here uh but yeah with that said I was given a challenge recently by my good friend Emmett Sheen who I was also lucky enough to meet recently which was really fun so uh yeah Amit sent me this challenge uh and it's we're a challenge a CSS riddle as he called it and we're gonna jump into it in just a second but if you want I have linked to the the riddle down below so you can give it your own try it 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 uh I had a different intro but I got really really frustrated with this one I went down a hole that did did not work at the beginning and eventually um yeah just to say that this isn't 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 um 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 um is important obviously and this is what we have now where it's speeding along and 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 um 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 um 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 gonna like muck up everything basically um so let's just do an ease in out because that's uh well I mean you'll see once that uh 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 um 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 with 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 um we'll do that and then I'm going to do a rotate two seconds two seconds um and basically what this should do is a two second delay and then run there and this is just a test so it run one 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 is in so that one's the one that's going to run once only so and the ease in should make it progressively get faster and maybe like a cubic bezier or something there could work better then this we can put back to the 0.5 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 seems to have completely broken it and it doesn't work at all why oh because here we have it unpaused um so we can still do the animation play state of running that would help don't delete that one Kevin uh there oh so no that didn't work at all why not actually sort of thought and what if I did two seconds instead of one I really we had that working oh 0.5 seconds I'm breaking that and it was using that as the time oh oh there we go speeding up and then it takes off uh 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 um 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 um 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 um 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 as the default or paused and pauses is a useful one to have this would be a nice one that if we get animated but there's no way of animating that or transitioning it or anything like that so that won't work um 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 um so it looks so good that first time right there that was perfect and then everything breaks um 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 and we transition because if something's not animatable it doesn't mean that it can't switch between them um there's a word for it that I can't think of off the top of my head to do that um where 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 um 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 um right yeah I 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 um 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 just you're using your most in most out right as soon as the mouse comes off you could 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 Emmett 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 uh I'm really stuck on how to do this but we're gonna get through it uh 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 um so I think the the solution now is to try and find a different solution um instead of it's one of those things where like I could layer more and more on top of that it's always something I say like if you're stuck if you're trying to solve a problem with CSS and you're layering 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 um right it the first band it's 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 hovered once so um I think I 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 paused 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 um 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 uh 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 it oh the there's the Twitter bird flying around too uh 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 Tas here I don't we could just do this body hover right it has 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 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 and 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. if I reverse rotate it something could happen 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 didn't ease in would that help because I think the default ease so it's 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 he's out there's it's really that's it we got it uh minus the scroll bars um so okay what's happening is I got it okay I don't know if we're allowed this but I'm gonna do a uh where wrapper I'm trying to get away from using container as much because we have container queries now um so this let's take that and put that on the square wrapper and then this will go right here so yes okay wait it stopped like 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 um let's put a outline one pixel solid blue um just so we can see it uh we'll do five and orange easier to see uh so what's happening is it runs the animation now it's spinning and this is why this works because it's spinning it's spinning it's 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 it's spinning and then when I take it off it immediately the the square completely stops it goes into the pause State immediately but because we have this transition here it can the parent spins and slows down because it's an ease out so it goes like 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 um 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's 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 um 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 um you can have I said are you allowed to change the HTML he said you can but you don't have to um and that got me wondering so uh yeah it got me wondering and I I it was a 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 um that means I could I could just say that we're gonna transition that one with me hover 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 uh and not 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 I 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 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 uh 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 uh don't know the Practical use cases other than something like this um where you can have the animation going anyway really cool and yeah if you enjoyed this video and you want to see me working my way through another problem no less of a rebel 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 corn on the internet just a little bit more awesome