css 动画仅适用于 safari

Question

我是 Web 开发的新手，但我正在尝试为我的作品集网站制作我的徽标（在 codepen 中由蓝色矩形表示）动画。实际上有两个动画。 1. 淡入：标志从顶部淡入 2. 缩小：（延迟 3 秒后）标志从页面中间移动到左上角并缩小一点。

如果你在 safari 中打开笔，你会看到它在工作，但如果你在 chrome 或 firefox 中打开它（假设你更改了 -webkit-），它会将两个动画混合为一个。

关于为什么会发生这种情况以及如何解决它的任何想法？

codepen

    div
{
  height: 150px;
  width: 170px;
  position: fixed;
  background-color: blue;
  -webkit-animation-duration: 2s, 2s;
  -webkit-animation-name: fadein, shrink;
  -webkit-animation-delay: 0, 3s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes fadein
{
    0% {opacity: 0; top: 30%; left: 50%; margin-top: -75px; margin-left: -85px;}
    100% {opacity: 1; top: 50%; left: 50%; margin-top: -75px; margin-left: -85px;}
}

@-webkit-keyframes shrink
{
    0% {top: 50%; left: 50%; margin-top: -75px; margin-left: -85px;}
    100% {top: 50px; left: 20px; margin: 0; width: 84px; height: 74px;}    
}

谢谢！

Answer 1

问题在于您的动画延迟。我不确定它是否被窃听或作为规范，但如果你不通过一个单元，它就不起作用，甚至为零。

-webkit-animation-delay: 0s, 3s;

也就是说，使用0s 而不是0。