大佬教程收集整理的这篇文章主要介绍了html – Css从左到右移动元素动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这是一个jsfiddle示例,我正在研究它.它从左到右,从右到左移动,但没有动画.
我做错了什么？
CSS：
div { width:100px; height:100px; BACkground:red; transition-property: right,left; transition-duration: 2s; -webkit-transition-property: right,left; /* Safari */ -webkit-transition-duration: 2s; /* Safari */ position:absolute; } div:hover { right:0px; }
HTML：
<body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> <p>Hover over the div element above,to see the transition effect.</p> </body>
没有设置权利所以它试图从零到0px.显然,因为它没有什么可去的,它只是“扭曲”了.
如果你给未受阻的状态一个权利：90％;它会转换你喜欢的方式.
正如旁注,如果您仍然希望它位于页面的左侧,则可以使用calc css函数.
right: calc(100% - 100pX) ^ width of div
你不必使用左.
此外,您不能使用左或右自动转换,并将提供相同的“扭曲”效果.
div { width:100px; height:100px; BACkground:red; transition:2s; -webkit-transition:2s; -moz-transition:2s; position:absolute; right:calc(100% - 100pX); } div:hover { right:0; }
<p> <b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions. </p> <div></div> <p>Hover over the red square to see the transition effect.</p>
@L_944_1@表示calc()函数仅适用于IE10
以上是大佬教程为你收集整理的html – Css从左到右移动元素动画全部内容，希望文章能够帮你解决html – Css从左到右移动元素动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。