Question

您好我正在尝试使用CSS3为我的徽标设置动画，但我想让它在几秒后动画，所以我使用的是animation-delay属性。它在Chrome上运行得非常好，但在Firefox中它会延迟动画，但它所采取的位置是动画的结束位置，然后在动画开始延迟之后。

HTML

<div class="logo"></div>

CSS

.logo {
position: absolute;
width: 100px;
height: 100px;
background: red;
transform: translate(25px,500px);
-webkit-animation: logo 3s 1;
-moz-animation: logo 3s 1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
}
@-webkit-keyframes logo{
  0% {
    transform: translate(80px, 200px);
  }
  100% {
    transform: translate(25px, 500px);
  }
}
@keyframes logo{
  0% {
    transform: translate(80px, 200px);
  }
  100% {
    transform: translate(25px, 500px);
  }
}

这也是小提琴链接here

Answer 1

问题不在于动画延迟，而在于您使用初始transform在错误的位置初始化位置。

将.logo { ... transform: translate(25px,500px); }更改为.logo { ... transform: translate(80px, 200px); }

Demo

要使其保持最终状态，请添加animation-fill-mode:forwards

此外，您的一些前缀应该添加/更改。有关您需要的transform，animation等前缀的详细信息，请参阅this answer

Answer 2

尝试几乎所有我切换到Jquery的东西后，这适用于所有浏览器。

<div class="logo"></div>
.logo {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    left: 80px;
    top: 200px;
}
$(document).ready(function () {
    $('.logo').delay(3000).animate({
        'left': '25px',
        'top': '500px'
    }, 3000);
});

fiddle

Answer 3

尝试添加其他关键帧：

@-moz-keyframes logo {
}

Firefox中的CSS3动画延迟导致问题

3 个答案: