Question

当我更改左右变量时，我有一个需要从左到右和从右到左移动的元素。

这是我正在研究的一个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>

Answer 1

这是因为您没有给非悬停状态赋予right属性。

right未设置，所以它试图从无到有0px。显然因为它没有任何意义，它只是“扭曲”了。

如果您将未覆盖的状态设为right:90%;，它将按照您喜欢的方式进行转换。

正如旁注所示，如果您仍希望它位于页面的左侧，则可以使用calc css函数。

示例：

right: calc(100% - 100px)
                     ^ width of div

您不必使用left。

此外，您无法使用left或right auto进行转换，并且会产生相同的“扭曲”效果。

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 +

Answer 2

试试这个

＆＃13;

div
{
  width:100px;
  height:100px;
  background:red;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  position:absolute;
}
div:hover
{
  transform: translate(3em,0);
  -webkit-transform: translate(3em,0);
  -moz-transform: translate(3em,0);
  -o-transform: translate(3em,0);
  -ms-transform: translate(3em,0);
}

＆＃13;

<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>

＆＃13;

DEMO

Answer 3

您应该尝试使用 css3动画进行此操作。检查下面的代码：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: myfirst 5s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s infinite;
    animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: green; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}

@keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: green; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The animation-direction property is not supported in Internet Explorer 9 and earlier versions.</p>
<div></div>

</body>
</html>

'div'是你的动画对象。

我希望你觉得这很有用。

感谢。

Css从左到右移动元素动画

3 个答案: