internet-explorer - IE10 中的关键帧动画问题

Question

我的 css 动画在所有真实浏览器中都能完美运行，但正如预期的那样，它在 IE10 中运行不佳。 现在看来IE不想轮换了360deg适本地。仍在寻找可能的解决方法，不会牺牲真实浏览器中的功能。

编辑 看来ie10会translateX或 rotate(360deg) , 但不会同时做这两件事。

这是 jsFiddle ，以及代码:

@keyframes lightSpeedIn {
0% {
    top: 30px;
    transform-origin: top left;
    transform: translateX(700px) skewX(-50deg) rotate(0deg);
    opacity: 0;
}
25% {
    top: 15px;
    transform-origin: top left;
    transform: translateX(0px) skewX(-50deg)rotate(0deg);
    opacity: 1;
}
35% {
    top: 15px;
    transform-origin: top left;
    transform: translateX(-25px) skewX(0deg)rotate(180deg);
    opacity: 1;
}
65% {
    top: -15px;
    transform-origin: top left;
    transform: translateX(0px) skewX(0deg)rotate(360deg);
    opacity: 1;
}
100% {
    top: -15px;
    transform-origin: top left;
    transform: translateX(0px) skewX(0deg);
    opacity: 1;
}
}
.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    -moz-animation-name: lightSpeedIn;
    -o-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

Answer 1

好吧，我设法让它工作了。

我在 buggy 区附近又创建了 3 个台阶:

34.98% {
    top: 15px;
    transform-origin: top left;
    transform: translateX(-25px) skewX(0deg)rotate(179deg);
    opacity: 1;
}    
34.985% {
    top: 15px;
    transform-origin: top left;
    transform: translateX(-25px) skewX(0deg)rotate(179deg);
    opacity: 0;
}    
34.99% {
    top: 15px;
    transform-origin: top left;
    transform: translateX(-25px) skewX(0deg)rotate(180deg);
    opacity: 0;
}
35% {
    top: 15px;
    transform-origin: top left;
    transform: translateX(-25px) skewX(0deg)rotate(180deg);
    opacity: 1;
}

如您所见，这个想法是接近 180 度，关闭可见性，达到 180 度，然后打开可见性。所有这一切都在尽可能短的时间内完成。

updated fiddle

我放慢了速度，以便于检查

关于防止它破坏其他兄弟，好吧，鉴于 IE 人员 ** 决定取消该属性的前缀(我将保留 * 空间以便每个人都可以放置想要的形容词)，我我猜您应该在将来的某个时候审查该设计。