0

我试图让这个动画在 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;
}

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

4

3 回答 3

0

看起来这不能单独使用关键帧来完成。我将使用 jquery 来做最后的淡出动画。

于 2012-10-04T09:03:25.187 回答
0

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

JS 小提琴演示

我认为您正在寻找的效果无法达到keyframes。请确认是否满意！

于 2012-10-04T07:22:05.790 回答
0

这里的代码工作。 Demo Jsfiddle 不起作用的原因是延迟时间。你看不出有什么不同。所以我将延迟时间更改为 10 秒，只是为了让您看到它有效。 您的代码与其他延迟一起工作

我对代码进行了一些更改以查看是否有效，只需根据您的要求更改时间和其他内容：

首先你会看到出现，flipAnimationu 在 20 秒后一起工作，你会看到消失的工作并将颜色更改为天蓝色、黑色、天蓝色。

于 2012-10-04T07:35:48.580 回答