Html 为什么CSS动画（webkit动画）不起作用？

我写的代码如下

/*淡入淡出的动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
0% {
不透明度：0.4；
}
100% {
不透明度：1；
}
}
@关键帧淡入淡出{
0% {
不透明度：0.4；
}
100% {
不透明度：1；
}
}
/*在较小的屏幕上，减小文本大小*/
@仅介质屏幕和（最大宽度：300px）{
.文本{
字体大小：11px；
}
}

标题一
标题二
标题三

似乎工作正常。我已经知道了。但它不适用于我的网页..：（我的网页结构可能有问题吗？你必须在问题中说明这个问题。如果你做不到，我们也帮不了你。我很少使用这个网站，所以我不习惯问。但我解决了这个问题。我在html的脚本标记中省略了'defer'关键字。谢谢你的帮助。