CODEWITHSUNDEEP
csscss-transitionscss-animations
user2172240
user2172240

Reputation: 1

@keyframes when hovering

What I'm trying to do: I have links in a black box. I'm trying to make the background of the box turn from black to blue when hovering. I'm not sure how to do this. Here is my CSS (I have it set to 5s but I really want it to take effect when hovering)

@keyframes navBox
{
from {background: #000;}
to {background: #1821BC;}
}

@-moz-keyframes navBox /* Firefox */
{
from {background: #000;}
to {background: #1821BC;}
}

@-webkit-keyframes navBox /* Safari and Chrome */
{
from {background: #000;}
to {background: #1821BC;}
}

nav li
{
 animation: navBox 5s;
 -moz-animation: navBox 5s;
 -webkit-animation: navBox 5s;
}

![]picture of link box1

Upvotes: 0

Views: 278

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

If you just want to just animate one time from one color to another, you should use transitions instead of animations:

nav li {
    -webkit-transition: color 1s;
    transition: color 1s;
}
nav li:hover {
    color: blue;
}

In action: http://jsfiddle.net/ExplosionPIlls/bZXB8/

Upvotes: 1

Related Questions