0

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?

Robby Hoover
  • 71
  • 1
  • 11
  • why not a simple transition ? – Temani Afif Nov 21 '19 at 23:33
  • Are you trying to change the text colour or background colour? Your question and code conflict each other. As @TemaniAfif mentioned, a transition might be easier, check out https://stackoverflow.com/questions/4411306/transition-of-background-color – Ash Nov 21 '19 at 23:35

1 Answers1

1

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;
}
Brett Parsons
  • 444
  • 3
  • 9
  • Thank you for the answer! I agree, this is a better way to go about it, however your solution still did not work when i ran the code, the color did not change. – Robby Hoover Nov 22 '19 at 21:20
  • Can you show the HTML? There has to be a specificity issue or a typo then. I did notice in your example you didn't have a `.` before your `.text` class. – Brett Parsons Nov 22 '19 at 21:28
  • It was a typo! Thank you so much for your help! – Robby Hoover Nov 23 '19 at 03:56