CODEWITHSUNDEEP
cssanimationcolorshovercss-animations
Ghost Echo
Ghost Echo

Reputation: 2067

Is it possible to - on:hover pause css3 animation and change its background color?

I'm using keyframes to constantly change the font-color of an <a> link. On :hover I want to be able to stop the animation and define the font-color .

@-webkit-keyframes fontt {
  0%, 100% {font-size:50px;color:black;}      
  50% {color:red;}}
#box a {-webkit-animation: fontt 2s infinite;}
#box a:hover {color:#4480e8;-webkit-animation-play-state: paused;
}

Is it possible to pause the keyframes and also change the font color?

I tried using !important,

I tried putting the color:red; on different naming conventions (a:hover, #box a:hover, #box:hover a

Will having paused keyframes override my :hover? Is there a way to set priority?

Example: http://jsfiddle.net/rvBS2/

Upvotes: 1

Views: 2365

Answers (2)

arturmoroz
arturmoroz

Reputation: 1937

-webkit-animation-play-state: paused and -webkit-animation-play-state: running

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191789

Rules set by the keyframe seem to have higher importance in the cascade. I'm not sure if this should be the case, but @media rules have the highest level of importance. @keyframes either should too or this is a bug. The cascade spec does not mention them specifically.

Instead of using pause, you can remove the animation entirely.

#box a:hover {-webkit-animation: none;color:red; font-size: 50px;}

http://jsfiddle.net/rvBS2/1/

Upvotes: 6

Related Questions