大佬教程收集整理的这篇文章主要介绍了css – 在IE10中,translate3d介于0%和负%之间,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我用以下(简化)标记完成了这个:
<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%.
我想这与负面百分比有关,尽管我在其他地方找不到任何关于此的信息.
虽然肯定不理想,如果你对两个关键帧使用几乎为零的百分比,你可以在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中修复.
以上是大佬教程为你收集整理的css – 在IE10中,translate3d介于0%和负%之间全部内容,希望文章能够帮你解决css – 在IE10中,translate3d介于0%和负%之间所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。