Javascript 将转换应用于更改div内容

我真的希望这个问题有意义！我在一个网站上工作，使用以下答案中的代码：

我想应用一个非常基本的/短的淡入过渡，这样变化的文本不会闪烁得那么快，看起来不那么刺耳。我该怎么做？如何知道将转换应用于哪个属性

编辑：

这是现有的基本Javascript：

<script>
function hover(description) {
console.log(description);
document.getElementById('content').innerHTML = description;
}
</script>

函数悬停（说明）{
控制台日志（描述）；
document.getElementById（'content'）.innerHTML=description；
}

任何建议都将不胜感激

---

谢谢大家!

我希望你不介意我添加了一些CSS

这将添加淡入过渡

函数悬停（说明）{
控制台日志（描述）；
document.getElementById（'content'）。className=null；
setTimeout（函数（）{
document.getElementById（'content'）。className='transitionedText'；
document.getElementById（'content'）.innerHTML=description；
},100);
}

@关键帧文本转换{
0%{
不透明度：0；
}
100%{
不透明度：1；
}
}
#内容{
颜色：#000；
不透明度：0；
}
#content.transitionedText{
动画名称：textTransition；
动画持续时间：1000ms；
动画填充模式：正向；
颜色：红色；
}

东西应该放在这里。







苹果
橙色
糖果

我希望您不介意我添加了一些CSS

这将添加淡入过渡

函数悬停（说明）{
控制台日志（描述）；
document.getElementById（'content'）。className=null；
setTimeout（函数（）{
document.getElementById（'content'）。className='transitionedText'；
document.getElementById（'content'）.innerHTML=description；
},100);
}

@关键帧文本转换{
0%{
不透明度：0；
}
100%{
不透明度：1；
}
}
#内容{
颜色：#000；
不透明度：0；
}
#content.transitionedText{
动画名称：textTransition；
动画持续时间：1000ms；
动画填充模式：正向；
颜色：红色；
}

东西应该放在这里。







苹果
橙色
糖果

可能您可以在更改的同时应用CSS动画规则。如果您创建一个可以播放的JSFIDLE，您可能会得到更好的响应。当然！添加了一个链接。可能您可以在更改的同时应用CSS动画规则。如果您创建一个可以播放的JSFIDLE，您可能会得到更好的响应。当然！已添加链接。谢谢！我对关键帧一无所知，所以这不是我曾经想到过的解决方案。非常感谢！非常感谢。我对关键帧一无所知，所以这不是我曾经想到过的解决方案。非常感谢！