css 动画只适用于 safari

Question

我是 Web 开发的新手，但我正在尝试为我的投资组合网站制作 Logo 动画(在代码笔中用蓝色矩形表示)。实际上有两个动画。 1. fadein:logo从顶部淡入 2. shrink:(延迟3秒后)logo从页面中间移动到左上角，缩小一点。

如果您在 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;

即使用0代替0。