CODEWITHSUNDEEP
css
Robby Hoover
Robby Hoover

Reputation: 67

CSS Animation isn't working, maybe keyframes is the issue?

im trying to do an animation with CSS that makes text change color when you hover over it. Here is my code, im really not sure what my issue is here. Doesen't work in firefox or in chrome.

@keyframes swap {
from {background-color: black;}
to {background-color: purple;}
}

text.normText:hover {
animation-name: swap;
animation-duration: 2.5s;
}

The keyframes part doesen't highlight as a special word in Netbeans so maybe thats the issue?

Upvotes: 0

Views: 153

Answers (1)

Brett Parsons
Brett Parsons

Reputation: 454

If it's for text color you need to use the color property instead of background-color. I also wouldn't even worry about using keyframes for something this simple. I would do it like this. 

.text.normText {
  color: black;
  transition: color 2.5s;
}

.text.normText:hover {
  color: purple;
}

Upvotes: 1

Related Questions