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)函数来实现动画函数