Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Keyframe animation issue in IE10

Keyframe animation issue in IE10

Problem

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;
}
Problem courtesy of: apaul34208

Solution

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.

Solution courtesy of: vals

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Keyframe animation issue in IE10

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×