html右向左移动效果,html – Css从左到右移动元素动画

这是因为你没有给予非徘徊状态一个正确的属性.

没有设置权利所以它试图从零到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;

}

Note: This example does not work in Internet Explorer 9 and earlier versions.

Hover over the red square to see the transition effect.

CanIUse表示calc()函数仅适用于IE10