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

好吧，我设法让它发挥作用。

我在越野车区附近又创造了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人 ** 决定取消修正该属性（我将留下*空间，以便每个人都可以放置想要的形容词），我我猜你应该在将来的某个时候审查这个设计。

IE10中的关键帧动画问题

1 个答案:

updated fiddle