Here was my slight mental breakdown while trying to make 3 animations play nicel

[borianparker]

Alright, I want to have 4 images in a square, expand their margins on load so they push away from each other, then have a border expand around them like a frame. Google google google, cool css3 animations seems like exactly what I need. Let me just animate this margin and this border, no problem at all. Well, I don’t really want the border to expand until the margin. Seems like an easy fix, I can chain animations and add delays. Neat, everything looks great, now what if I want to change the border color on hover, should be no problem. Let me just add another animation on hover and, oh no, it’s happening, everything is breaking and I don’t know why. My images start jumping around on hover, while transitioning the border. Think Steven wtf is going on. After a few pages of google I find out that the hover tag removes the animation, then it is re-animating off of hover. Exactly what no one wants. So I attempt to set the margins to the same as where the css of the first transition ends. Nothing works, frustration ensues. I inspect the page and try changing the margins, nothing is working…breaking down. I scroll through all the elements and there it is, a keyframe element set by the first animation being executed last. I think okay what if I just stop the animation on hover and use a transition on the border-color to change it. Well I find out that transition still uses the animation clock, so it won’t work while it is turned off. Mental break down on the verge. I finally monkey around the issue by using a 0 second animation to expand the margins and create the border then do the color change animation on hover. Holy Batman, it works and I am exhausted. Oh wait… what happens when I hover while the page is rendering and the first animations are still running. You guessed it, double expand! For some reason it doesn’t over write the first margin percentage, it just tacks it right on. Tearing my hear out while listening to Adele. Stackoverflow to the rescue! A suggestion to remove animation was my road to salvation. By adding the first animation on load through javascript I could listen to the event. Once it completed I was able to add a class that held the hover animation. Unfortunately the listener fires after the first animation is completed. I had to setTimeout for the duration of my second load animation. Finally, 3am, 8 hours later, mentally drained, I have 4 images that sit in a square and have 3 nice transitions.

[Beverleyh]

Hmmm, is there a question in there or are you just using the forum to tell people about your struggles? (You might want to blog about it via your own website instead).

Either way, it would be easier for people to understand the problem/solution if you provide a reduced demo in CodePen.

Additionally, if you are asking for help, please clarify concisely what the issue is, and what you ideally want to achieve.

[borianparker]

Hmmm, is there a question in there or are you just using the forum to tell people about your struggles? https://bluestacks.vip/ https://textnow.vip/ https://downloader.vip/vpn/
(You might want to blog about it via your own website instead).

Either way, it would be easier for people to understand the problem/solution if you provide a reduced demo in CodePen.

Additionally, if you are asking for help, please clarify concisely what the issue is, and what you ideally want to achieve.

---

maybe both beverley!!

[Author]

Posts