I have animation running continuously which moves a element(arrow) from right to left then rotate 180deg and move from left to right. For some reasons, animation is not visible in IE10 but arrow appears in left and right position.
Overall, animation happens but translate3d animation (move from left to right and right to left) is not visible.
@keyframes moveRightToLeft {
0% {
-moz-transform: rotateZ(0deg) translate3d(0%, 0, 0);
-webkit-transform: rotateZ(0deg) translate3d(0%, 0, 0);
-o-transform: rotateZ(0deg) translate3d(0%, 0, 0);
-ms-transform: rotateZ(0deg) translate3d(0%, 0, 0);
transform: rotateZ(0deg) translate3d(0%, 0, 0);
opacity: 1;
}
50% {
-moz-transform: rotateZ(0deg) translate3d(-80%, 0, 0);
-webkit-transform: rotateZ(0deg) translate3d(-80%, 0, 0);
-o-transform: rotateZ(0deg) translate3d(-80%, 0, 0);
-ms-transform: rotateZ(0deg) translate3d(-80%, 0, 0);
transform: rotateZ(0deg) translate3d(-80%, 0, 0);
opacity: 0;
}
51% {
-moz-transform: rotateZ(180deg) translate3d(0%, 13px, 0);
-webkit-transform: rotateZ(180deg) translate3d(0%, 13px, 0);
-o-transform: rotateZ(180deg) translate3d(0%, 13px, 0);
-ms-transform: rotateZ(180deg) translate3d(0%, 13px, 0);
transform: rotateZ(180deg) translate3d(0%, 13px, 0);
opacity: 0;
}
75% {
-moz-transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
-webkit-transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
-o-transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
-ms-transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
opacity: 1;
}
100% {
-moz-transform: rotateZ(180deg) translate3d(-80%, 13px, 0);
-webkit-transform: rotateZ(180deg) translate3d(-80%, 13px, 0);
-o-transform: rotateZ(180deg) translate3d(-80%, 13px, 0);
-ms-transform: rotateZ(180deg) translate3d(-80%, 13px, 0);
transform: rotate(180deg) translate3d(-80%, 13px, 0);
opacity: 0;
}
}
The problem with my CSS animation in Internet Explorer 10 and 11 was using percentage(%) value for one axis and pixel(px) value for other axis in translate3d. I was able to fix the bug moving to pixel based value for all axis in translate3d
@keyframes moveRightToLeft {
0% {
-webkit-transform: rotateZ(0deg) translate3d(0, 0, 0);
-ms-transform: rotateZ(0deg) translate3d(0, 0, 0);
transform: rotateZ(0deg) translate3d(0, 0, 0);
}
50% {
-webkit-transform: rotateZ(0deg) translate3d(-70px, 0, 0);
-ms-transform: rotateZ(0deg) translate3d(-70px, 0, 0);
transform: rotateZ(0deg) translate3d(-70px, 0, 0);
opacity: 1;
}
51% {
opacity: 0;
-webkit-transform: rotateZ(0deg) translate3d(-75px, 0px, 0);
-ms-transform: rotateZ(0deg) translate3d(-75px, 0px, 0);
transform: rotateZ(0deg) translate3d(-75px, 0px, 0);
}
52% {
opacity: 0;
-webkit-transform: rotateZ(180deg) translate3d(75px, 0px, 0);
-ms-transform: rotateZ(180deg) translate3d(75px, 0px, 0);
transform: rotateZ(180deg) translate3d(75px, 0px, 0);
}
55% {
opacity: 1;
}
75% {
-webkit-transform: rotateZ(180deg) translate3d(40px, 0px, 0);
-ms-transform: rotateZ(180deg) translate3d(40px, 0px, 0);
transform: rotateZ(180deg) translate3d(40px, 0px, 0);
opacity: 1;
}
100% {
-webkit-transform: rotateZ(180deg) translate3d(0px, 0px, 0);
-ms-transform: rotateZ(180deg) translate3d(0px, 0px, 0);
transform: rotate(180deg) translate3d(0px, 0px, 0);
opacity: 1;
}
}It is interesting why IE cannot work with pixel for one axis and percentage value for other axis? For future use, thing to keep in mind.
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加