Why can't we trigger CSS3 Animations using :hover and :focus?

CSS Animations are a really powerful and useful set of features - they allow keyframe animation instead of simple A to B transitions. But, for some reason, you can’t trigger them from a user interaction. Why not?

View a demo

UPDATE: It turns out the problem is when mixing animations on load and then on hover. This seems to be broken. I still don’t know why, seems to be a browser issue.

The code I try to use

So, I define an animation using keyframes as follows (I’ve left out the vendor prefixes for clarity). It makes the elements it’s applied to “pulse” to catch someone’s eye:

@keyframes my-animation {
  0%   { opacity: 1; transform: scale(1); }
  20%  { opacity: .8; transform: scale(1.1); }
  40%  { opacity: 1; transform: scale(1); }
  60%  { opacity: .8; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

Then I apply it as follows (plays the animation once, for 2 seconds, with no delay, in both directions):

a:hover, a:focus {
  animation : my-animation 2s 0s 1 both;
}

The effect I expect

Is that, on hover or keyboard focus, an anchor will pulse to catch the eye of the user.

But, instead, in every browser I’ve tried, nothing happens. And yet when the pseudo-classes are removed, the animation runs on page load, so there’s not a problem with the syntax.

Additional animation problems

Something else I’ve wanted to do, but haven’t been able to without serious browser problems with broken animations, is mix a keyframe animation with a CSS transition. So, on page load I have certain elements fade-in and fade out after a set time, then I want to have those same elements fade in and out when the user hovers over them. I use keyframes for the load, and then CSS Transitions on :hover/:focus for the interaction. It doesn’t work. Either one will on their own, but mix the two together and the hover animation breaks.

So, can anyone help? Why are animations behaving in these counter-intuitive and semi-broken ways?

Entry Information

Posted:

Mon, 1st Aug 2011 at 08:08 UTC

Filed under:

Web Development

Tags:

Comments

skip to comment form

flamingotravel posted 3 days, 2hrs, 6mins after the entry and said:
i like technology and CSS3. it can create the effect as flash. I like it. Thanks for your post.
passer by posted 97 days, 22hrs, 51mins after the entry and said:
Don't know if you still have any questions about this but…

Firstly, the syntax for a shorthand declaration of animation:
animation: name | duration | timing-function | delay | iteration-count | direction;
You have:
animation : name | duration | delay | direction; /* ? */
animation : my-animation 2s 0s 1 both;
CSS is a bit of a grammar nazi…

Secondly, if I'm correct in assuming you are using "both" for the direction property, visiting the CSS reference should fix the problem.

Archived entry | Matt Wilcox .net