My CSS animation works flawlessly in all modern browsers, except for IE10 which is causing some trouble. It appears that IE is having difficulty properly rotating 360deg. I am still searching for a workaround that won't compromise the functionality in other browsers.
UPDATE It seems that IE10 will either .translateX or rotate(360deg), but not both simultaneously
Feel free to check out the jsFiddle and the accompanying code below:
@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;
}