Question

我在网络开发方面很陌生，但我试图为我的投资组合网站设置动画我的徽标（在蓝色矩形的代码中表示）。实际上有两个动画。 1. fadein：徽标从顶部2渐弱。收缩:(延迟3秒后）徽标从页面中间移动到左上角并缩小一点。

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

为什么会发生这种情况的任何想法如何解决？

    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。

css动画只在野生动物园工作

1 个答案: