animation - CSS3 动画 : Why doesn't animating the same property work?

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无法实现您要的效果。请确认是否满意!