Html 为什么这个动画不播放？

我尝试设置fa图标的动画，但此图标无法播放动画。我把这个图标合并到一个div中，但它仍然不起作用。 CSS:

HTML:

一些文本

您需要在@keyframes之后包含动画（显示）的名称

@keyframes appears { ... }

---

动画名称

用于指定

@关键帧

动画的名称。
因此

动画名称

和

@关键帧

后面的名称必须匹配

 <style>
    .fa-chevron-down {
     animation-name: bottomArrow;
     animation-duration: 10s;
     animation-delay: 0s;
     text-shadow: none;
     transition: 0s;
    }

    @keyframes bottomArrow {
     from {
        transform: translateY(-45%);
        opacity: 0;
        filter: blur(5px);
     }
     50% {
        opacity: 1;
        transform: translateY(-45%);
        filter: none;
     }
     100% {
        transform: translateY(50%);
        opacity: 0;
        filter: blur(5px);
     }
    }
 </style>

---

因为你的动画名字是“ButoMARROW”，但是在动画名称中你写了“出现”。把它改为“ButoMARROW”，你也可以考虑只把动画名字作为<代码>动画名，而不包括持续时间和迭代次数。非常感谢。在句子@keyframes work后面写动画名称。我有三个动画名称，因此我的css代码只读取第一个动画。错误，除非他纠正这一点，否则动画将无法工作：

动画名称：出现5s无限此属性如果仅用于名称，则它不是
动画
速记你说得对…我想删除我的答案，因为我测试了我自己的建议，但它不起作用。对不起，误传了
@keyframes appears { ... }

 <style>
    .fa-chevron-down {
     animation-name: bottomArrow;
     animation-duration: 10s;
     animation-delay: 0s;
     text-shadow: none;
     transition: 0s;
    }

    @keyframes bottomArrow {
     from {
        transform: translateY(-45%);
        opacity: 0;
        filter: blur(5px);
     }
     50% {
        opacity: 1;
        transform: translateY(-45%);
        filter: none;
     }
     100% {
        transform: translateY(50%);
        opacity: 0;
        filter: blur(5px);
     }
    }
 </style>

   animation: name duration timing-function delay etc..;