IE10中介于0%和负%之间的translation3d [英] translate3d between 0% and negative % in IE10
问题描述
我有一个元素需要左右移动到整个宽度的50%。
I have an element that needs to animate left and right to the amount of 50% of its full width.
我已经完成了以下操作(简化了)标记:
I've accomplished this with the following (simplified) markup:
<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, 0); }
20%, 40% { transform: translate3d(-50%, 0, 0); }
60%, 80% { transform: translate3d(50%, 0, 0); }
90%, 100% { transform: translate3d(0, 0, 0); }
}
注意:为简洁起见,省略了供应商前缀
在IE10中,它没有移动元素宽度的50%,而是在负数中移动了一个较小的(任意值),然后在正数中移动了相同的数量,然后在动画的相位在80%到90%之间,它会捕捉到整个50%的距离,然后又回到0%。
In IE10, instead of moving 50% of the element's width, it moves a smaller (arbitrary?) amount in the negative, then the same amount in the positive, then at the phase of the animation between 80% and 90%, it snaps to the full 50% distance and then back to 0%.
我想这与负百分比,尽管我在其他地方找不到与此有关的任何信息。
I imagine this has something to do with the negative percentage, though I can't find any information regarding this elsewhere.
这是一支笔: http://codepen.io/alexcoady/pen/JogPgx
推荐答案
在2个关键帧之间转换为0时,IE 10似乎出现了一些奇怪的错误。
It appears IE 10 has some strange bug when transitioning between 2 keyframes with a transform of 0.
如果您对两个关键帧使用几乎为零的百分比,那当然不是很理想。 ,您可以在IE 10中达到相同的效果。
While certainly not ideal, if you use an almost-zero percentage for two of your keyframes, you can achieve the same effect in IE 10.
@keyframes MOVE_AROUND_TRANSFORM {
0% {
transform: translate3d( 0, 0, 0 );
}
10% {
transform: translate3d( 0.0001%, 0, 0 );
}
20%, 40% {
transform: translate3d( -50%, 0, 0 );
}
60%, 80% {
transform: translate3d( 50%, 0, 0 );
}
90% {
transform: translate3d( 0.0001%, 0, 0 );
}
100% {
transform: translate3d( 0, 0, 0 );
}
}
或者,您可以在两个关键帧中都使用几乎为零的值。
Alternately, you could just use the almost-zero value in both the keyframes.
@keyframes MOVE_AROUND_TRANSFORM {
0%, 10% {
transform: translate3d( 0.0001%, 0, 0 );
}
20%, 40% {
transform: translate3d( -50%, 0, 0 );
}
60%, 80% {
transform: translate3d( 50%, 0, 0 );
}
90%, 100% {
transform: translate3d( 0.0001%, 0, 0 );
}
}
此问题似乎已在IE 11中解决。
Thankfully this issue appears to have been fixed in IE 11.
这篇关于IE10中介于0%和负%之间的translation3d的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!