18

I'm not a web or UX expert, so perhaps this is standard, but it seems odd to me

When hovering over the Ask Question button on the main site , the button animates firing lazers. If before the animation finishes, you move away the mouse cursor, the button becomes static again.

However, when moving away from the element and moving back quickly, we can see the animation doesn't restart, but begins playing as if it never stopped.

Is this intentional behaviour or should it restart?

Obviously this is trivial either way, but I'm genuinely curious

  • 1
    Probably some nuance of on::hover and the animation continuing to animate when 'hidden' by the static image, then being shown again when you re-hover would be my guess. – Robotnik Mar 24 '17 at 4:19
  • 2
    can repro (ff51, kde plasma 5.9 on top of ubuntu 17.04 beta base) – Ave Mar 24 '17 at 6:17
  • I swear I reported this when the animation was brand new but I can't find it now. – Invader Skoodge Mar 25 '17 at 1:51
  • no-repro in Safari 10.2 on macOS Sierra 10.12.4. – grg Mar 25 '17 at 23:18
  • I can reproduce on Chrome 56.0.2924.87 on Windows 10. (Just updated to 57.0.2987.110 and it still happens). Also in IE 11.713.10586 and Edge 25.10586.672.0. – Timmy Jim Mar 28 '17 at 12:17
10

I've done some digging, and considered Robotnik's comment and I believe what's happening is exactly what he said.

I've constructed a JSFiddle showing how it works (note that I'm sure SE does it a little more cleverly, but you get the point). You can see that in the JSFiddle, the animation continues if you move you mouse away from it and then back onto the image quickly.

Here is the actual CSS from inspecting the source:

#nav-askquestion:hover {
background-image: url('img/mothership-lazers.gif?v=de6a0ef33c8b') !important;
background-image: url('img/mothership-lazers.gif?v=de6a0ef33c8b'),url('img/mothership.png?v=6ceca251c5e2') !important
}

Removing this bit of code causes the animation of the ask question button to not work at all.

Basically, when you hover over the ask question button, it replaces the static image with the Gif below:

Gif:

Gif

Static Image:

Static Image

Thanks to this SO question for some tips!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .