为什么我的 @-webkit-keyframes 淡入动画在加载页面时不起作用？

Question

我正在创建个人作品集，并尝试添加 CSS 动画以淡入图像。由于某种原因，我无法弄清楚为什么我的动画在加载时没有显示在我的网站上。我正在使用 Bootstrap 来设计我的页面。不确定这是否相关，但我还通过在浏览器中打开本地计算机上的 HTML 文件来测试我的网页。我在 MacBook Pro 上使用 Safari。

这是我的样式表中的 CSS：

@-webkit-keyframes fade-image {
     0% { opacity: 0; }
     100% { opacity: 1; }
}

img {
    vertical-align: middle;
    border-style: none;
    border-radius: 50%;
    -webkit-animmation: fade-image 3s;
}

HTML：

<div class="col-5">
    <img src="path to my image" class="rounded-circle">
</div>

我原本希望图像在加载页面时淡入，但它只是在加载或重新加载页面时出现。我的 CSS 中是否缺少某个属性？我知道由于我使用的是 Safari，我应该使用正确的 @-webkit 前缀，但这并没有为我解决问题。

正如你可能知道的那样，我是 CSS 动画的初学者。任何提示将非常感谢。谢谢！

Answer 1

您的代码中有一个拼写错误：

-webkit-ani**mm**ation:

删除多余的

m

。