CSS中的关键帧动画兼容

Question

问题1：

请问@keyframes的兼容有没有比较简略的写法

如下代码，我做一个图片翻转的动画，目前兼容的写法代码重复率很高，有没有办法压缩？

问题2：

我在关键帧的每个变化中添加了停顿，如0%到20%间添加了与20%效果相同的帧来实现一个停顿的效果，这个效果可以通过animation的属性直接实现吗，animation-delay实现的是初始停顿。

@keyframes fz {
    0% {transform: rotateY(45deg);}
    10% {transform: rotateY(180deg);}
    20% {transform: rotateY(180deg);}
    30% {transform: rotateY(360deg);}
    40% {transform: rotateY(360deg);}
    50% {transform: rotateX(45deg);}
    60% {transform: rotateX(45deg);}
    70% {transform: rotateX(180deg);}
    80% {transform: rotateX(180deg);}
    90% {transform: rotateX(360deg);}
    100% {transform: rotateX(360deg);}
}
@-webkit-keyframes fz {略}
@-moz-keyframes fz {略}

Answer 1

第一个问题，我好像记得有一个prefixfree.js插件。第二个问题，只能是自己定义中间过渡状态。想实现停顿，采用step(1,start)函数来实现动画函数