我有一个元素需要左右动画到其全宽度的50％.
我用以下(简化)标记完成了这个：
<div class="wrapper"> <div class="inner">Inner</div> </div>
和风格：
.wrapper {
position: relative;
width: 300px;
height: 200px;
}
.inner {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
animation: MOVE_AROUND 5s infinite;
}
使用关键帧动画：
@keyframes MOVE_AROUND {
0%,10% { transform: translate3d(0,0); }
20%,40% { transform: translate3d(-50%,0); }
60%,80% { transform: translate3d(50%,0); }
90%,100% { transform: translate3d(0,0); }
}
注意：为简洁起见,省略了供应商前缀
在IE10中,它不是移动元素宽度的50％,而是在负数中移动较小的(任意？)量,然后在正数中移动相同的量,然后在动画的相位在80％和90％之间移动,它会快速移动至完全50％的距离然后回到0％.
我想这与负面百分比有关,尽管我在其他地方找不到任何关于此的信息.
解决方法
在转换为0的两个关键帧之间进行转换时,IE 10似乎有一些奇怪的错误.
虽然肯定不理想,如果你对两个关键帧使用几乎为零的百分比,你可以在IE 10中实现相同的效果.
示例(Codepen)：
@keyframes MOVE_AROUND_TRANSFORM {
0% {
transform: translate3d( 0,0 );
}
10% {
transform: translate3d( 0.0001%,0 );
}
20%,40% {
transform: translate3d( -50%,0 );
}
60%,80% {
transform: translate3d( 50%,0 );
}
90% {
transform: translate3d( 0.0001%,0 );
}
100% {
transform: translate3d( 0,0 );
}
}
或者,您可以在两个关键帧中使用几乎为零的值.
示例(Codepen)：
@keyframes MOVE_AROUND_TRANSFORM {
0%,10% {
transform: translate3d( 0.0001%,0 );
}
90%,100% {
transform: translate3d( 0.0001%,0 );
}
}
值得庆幸的是,此问题似乎已在IE 11中修复.
