0

我正在玩一些 css 转换并为动态元素设置不同的动画延迟，以便 css 动画在页面上交错。

这是动画

-webkit-animation: bounceInLeft .5s ease-in 0s backwards;
-moz-animation: bounceInLeft .5s ease-in 0s backwards;
 animation: bounceInLeft .5s ease-in 0s backwards;

实际动画在 ff 和 chrome 上都可以正常工作，但在 Firefox 上，动画会正确延迟，而在 chrome 上，所有动画都会立即发生。

这是内联代码。这在 Firefox 上正常工作

style="animation-delay: 1s;"

这不适用于铬

style="-webkit-animation-delay: 1s;"

我在动画规则中指定了延迟，但我认为放置一个内联会覆盖它，它在 Firefox 上会这样做。有任何想法吗？谢谢

4

2 回答 2

1

我刚刚创建了一个 jsfiddle 来复制你的情况，它似乎对我来说是尊重 chrome 的内联延迟。也许其他地方有问题。看看这个小提琴，也许它会帮助阐明一个单独的问题。http://jsfiddle.net/vFKuu/

HTML

<div id="some-div" style="animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s;">Hi</div>

Javascript

#some-div
{
    width:100px;
    height:20px;
    background:#f00;
    font-family:Arial;
    -webkit-animation: cssAnimation .5s ease-in 0s backwards;
    -moz-animation: cssAnimation .5s ease-in 0s backwards;
    -o-animation: cssAnimation .5s ease-in 0s backwards;
    animation: cssAnimation .5s ease-in 0s backwards;
}
@keyframes cssAnimation {
    from { transform: translate(50px); }
    to { transform:  translate(0px); }
}
@-webkit-keyframes cssAnimation {
    from { -webkit-transform: translate(50px); }
    to { -webkit-transform:  translate(0px); }
}
@-moz-keyframes cssAnimation {
    from { -moz-transform:translate(50px); }
    to { -moz-transform: translate(0px); }
}
@-o-keyframes cssAnimation
{
    from { -o-transform: translate(50px); }
    to { -o-transform:  translate(0px); }
}
于 2013-10-04T19:51:06.787 回答
0

我发现了一些奇怪的东西。由于某种原因，内联覆盖 chrome 中样式规则的唯一方法是，如果动画延迟的值不是0。

如果值为 0 而不是 chrome，它在 Firefox 中可以正常工作。我通过将延迟的初始值更改为 1s 然后使用内联样式覆盖它来修复它。

于 2013-10-04T22:14:30.530 回答