CSS动画无法正常工作，可能是关键帧问题？

Question

im尝试使用CSS制作动画，将鼠标悬停在该动画上可使文本更改颜色。这是我的代码，我真的不确定我的问题在这里。在Firefox或Chrome中不起作用。

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

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

关键帧部分在Netbeans中没有突出显示为特殊词，所以也许这就是问题所在？

Answer 1

如果用于文本颜色，则需要使用color属性而不是背景颜色。我也不用担心关键帧就这么简单。我会这样做。

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

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