CODEWITHSUNDEEP
internet-explorercssanimationkeyframe
apaul
apaul

Reputation: 16170

Keyframe animation issue in IE10

I have css animation that works beautifully in all real browsers, but as expected its not working well in IE10. It now seems that IE doesn't want to rotate 360deg properly. Still Looking for possible work around, that wont sacrifice function in real browsers.

EDIT It seems that ie10 will translateX or rotate(360deg), but wont do both at the same time.

Here is the jsFiddle, and the code:

@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;
}

Upvotes: 1

Views: 733

Answers (1)

vals
vals

Reputation: 64244

Well, I managed to make it work.

I have created 3 more steps near the buggy zone:

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

As you can see the idea is get to almost 180 deg, turn off visibility, get to 180 deg, and turn on visibility. And all this in as few time as posible.

updated fiddle

I have slowed it down so that it is easy to check

About keeping it from spoil other brothers, well, given the IE people ** decision to unprefix that property (I will leave the * space so that everybody can put the adjective that wants), I guess that you should review that design sometime in the future.

Upvotes: 1

Related Questions