search

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
http://ianlunn.github.io/Hover/
Other
29.25k stars 5.78k forks source link

Animation doesn't play after link is clicked. #69

Closed dylancristy closed 9 years ago

dylancristy commented 9 years ago

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 commented 9 years ago

+1

chbdetta commented 9 years ago

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 commented 9 years ago

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

IanLunn commented 9 years ago

Thanks for answering this one @chbdetta