Question

我正试图让这个动画在Chrome中运行：

@-webkit-keyframes flipAnimation {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -webkit-transform-origin: right center;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        -webkit-transform-origin: right center;
    }
}

@-webkit-keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes disappear {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.flipAnimation {
    opacity: 0;
    -webkit-backface-visibility: visible !important;
    -webkit-animation: flipAnimation .5s, appear .2s, disappear .3s;
    -webkit-animation-delay: 0s, .3s, 2s;
}

但它总是很糟糕。例如，div.flipAnimation不会出现不透明度0.其次，div闪烁进出，最后消失的动画似乎没有正确触发。在同一动画中有2个不透明动画是否有问题，即使它们有延迟间隔？

Answer 1

我不太确定这是否是您希望的效果，但您可以查看我的解决方案：

JS Fiddle demo

我认为使用keyframes无法实现您所寻找的效果。请确认这是否令人满意！

Answer 2

这里的代码正常工作。 Demo Jsfiddle 它不起作用的共鸣是延迟时间。你看不出有什么不同。所以我将延迟时间改为10秒，只是因为你看到它是有用的。 Your code work with other delay

我在代码中做了一些更改，看看是否有效，只需根据您的要求更改时间和内容：

首先你看到了出现，flipAnimationu在20多岁后工作，你会看到消失的工作，并将颜色改为天蓝色，黑色，天蓝色。

Answer 3

看起来单独使用关键帧无法做到这一点。我将使用jquery做最后的淡出动画。

CSS3动画：为什么动画相同的属性不起作用？

3 个答案: