Animation doesn't play after link is clicked.

[dylancristy]

I am using the "ripple out" effect for some links. The links are set to open in a new window/tab. What is happening is that after someone clicks the link, a new tab is opened, but if you go back to the original page, the animation no longer plays for the link you just clicked on, until you refresh the page.

How can I fix that, so that the animation always plays?

[artemverbo]

+1

[chbdetta]

I create a fiddle: http://jsfiddle.net/2domtkmj/1/

It seems :focus is to blame.
We can't restart an animation without firstly reset it's animation state, which is the case when it's focused. Blurring can reset the state.

Clicking an anchor will implicitly focus on it. :hover won't work until anchor is blurred out.
Blurring happens when you click somewhere else, press [tab] or refresh the page.

Simply comment out :focus selector, or replace <a> with something un-focusable will work but we will lose focus-triggering animation as a result.

In addition, switching animation to transition will break the ripple-out effect.

[dylancristy]

Excellent, thanks. I will take out the :focus.

[IanLunn]

Thanks for answering this one @chbdetta