代码之家 › 专栏 › 技术社区 › apaul

IE10中的关键帧动画问题

keyframe animation css internet-explorer

apaul · 技术社区 · 13 年前

我有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;
}

1 回复 | 直到 13 年前

vals 13 年前

嗯,我设法做到了。

我在马车区附近又创建了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度,然后打开可见性。在尽可能短的时间内完成这一切。