1

我的 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;
}
4

1 回答 1

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 度，然后打开能见度。所有这一切都在尽可能短的时间内完成。

更新的小提琴

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

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

于 2013-04-07T07:13:12.540 回答