Javascript 如何使用css向内容添加转换

所以我已经创建了一个竞争网站，并希望每当用户悬停在这个链接上，然后文本的变化，我已经实现了文本的变化，但现在想添加一个过渡到它，请帮助我

顺便说一下，我只使用css来更改代码

#link:before 
{
position:fixed;  
left:52%; 
content:"I am feeling lucky"; 
transition:content 1s;
}

#link:hover:before 
{
position:fixed; 
text-decoration:none; 
left:52%; 
color:#666; 
content:"Wrong Decision";
}    

---

过渡：内容1s；无效请帮我修改代码。

您不能更改有效的

内容

，但您可以使用

：after

和

：before

进行此操作，并在悬停时显示/隐藏它

#link:before,
#link:after{
    position:fixed;
    text-decoration: none;
    left:52%; 
    content:"I am feeling lucky"; 
    transition:content 1s;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}
#link:after{
    content:"Wrong Decision";
    opacity: 0;
    color:#666;
}
#link:hover:before{opacity: 0;}
#link:hover:after{opacity: 1;}

---

您是在尝试CSS3转换还是JavaScript动画？什么样的转换？您想要什么样的效果？某种程度上的淡入淡出？我希望文本之间的变化是缓慢的。有点像一种衰退效应，为什么这两个#链接：在{}编写之后？因为不编写重复的属性twiceThanks您的代码帮助了一点，但仍然存在一个问题。当我从链接中移除鼠标时，它不会褪色，只是会启动。虽然它在你给我的演示链接上起作用。