动画在CSS中不起作用

我正在使用代码笔，希望我的元素之一淡入淡出。我在代码中找不到任何错误，但它仍然不工作。谢谢你的帮助

该项目是一个小的标志框，你按下打开一个新的文本窗口。它目前在鼠标悬停时会发生变化，但我也想让它淡入淡出，以便人们知道他们需要点击它

谢谢Danko，我现在开始工作了！真不敢相信问题就这么简单哈哈：）

---

这里的问题是

opacity

不接受

%

作为单位值。将其更改为介于

1

和

0

其中1=100%和0=0%

试试这个：

@keyframes fadin {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.mainlink a{
显示：块；
背景：url(http://i.imgur.com/E3EQRWV.jpg?2);
背景尺寸：封面；
宽度：50px；
高度：50px；
边界半径：50%；
位置：相对位置；
左边距：自动；
右边距：自动；
边框：2件纯黑；
动画：法丁3s无限交替；
-webkit动画：fadin 3s无限交替；
-moz动画：fadin 3s无限交替；
-o动画：法丁3s无限交替；
}
@关键帧淡入{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@-webkit关键帧淡入{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@-moz关键帧淡入{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@-o关键帧淡入{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}

问题发生在哪些浏览器中？你能创建一个JSFIDLE来演示这个问题吗？如果答案是有用的，别忘了在答案旁边把它标记为正确的复选图标

@keyframes fadin {
  0% {opacity: 1;}
  100% {opacity: 0;}
}