1

すべての実際のブラウザーで美しく動作する CSS アニメーションがありますが、予想どおり IE10 ではうまく動作しません。IE が適切に回転したくないようです。360deg実際のブラウザで機能を犠牲にすることのない、可能な回避策をまだ探しています。

EDIT ie10 はtranslateXorrotate(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 に答える