html – Css从左到右移动元素动画

前端之家收集整理的这篇文章主要介绍了html – Css从左到右移动元素动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我改变左右变量时,我有一个需要从左到右和从右到左移动的元素.

这是一个jsfiddle示例,我正在研究它.它从左到右,从右到左移动,但没有动画.

我做错了什么?

CSS:

Demo JSFiddle

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>

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

原文链接:https://www.f2er.com/html/227080.html

猜你在找的HTML相关文章