Question

我想在从左到右移动时为div设置动画 div正在移动，但没有动画它非常快而且我在悬停时已经将顶部和右侧属性分配给了div，但它没有发生

HTML：

<body><div></div></body>

CSS：

div
{
   width:100px;
   height:100px;
   background:red;
   transition-property: right, left;
   transition-duration: 10s;
   -webkit-transition-property: right, left; /* Safari */
   -webkit-transition-duration: 2s; /* Safari */
   transition-timing-function:ease;
   position:absolute;
}

div:hover
{
   right:30px;
   top:10px;
}

JS Fiddle

我需要轻松缓慢地移动div

Answer 1

首先，您需要为起始位置定义right，例如right: calc(100% - 100px);

＆＃13;

.wrap {
  width: 100%;
  height: 100px;
  background: orange;
}
.cube {
width:100px;
height:100px;
background:red;
right: calc(100% - 100px);
transition-property: right;
transition-duration: 10s;
-webkit-transition-property: right; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
.wrap:hover .cube
{
right:30px;
}

＆＃13;

  <div class="wrap">
    <div class="cube"></div>
  </div>

＆＃13;

Answer 2

试试这个，它的作品

div {
  width:100px;
  height:100px;
  background:red;
  transition: 1000ms;
  position:absolute;
  left: 0;
}

div:hover {
  left: 100%;
  margin-left: -100px;
}

JSFiddle http://jsfiddle.net/3SYka/287/

Answer 3

向右，向左替换边距。

＆＃13;

div
{
width:100px;
height:100px;
background:red;
transition-property: margin-left;  
transition-duration: 2s;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:linear;
position:absolute;
}
div:hover
{
margin-left:80%; /* Using margin-left */
top:10px;
}

＆＃13;

<body>
<div></div>
</body>

＆＃13;

Answer 4

您是否知道我们可以通过将其卸载到GPU来硬件加速图形密集型CSS功能，以便在浏览器中获得更好的渲染性能？

尝试使用它，这是transform

的示例

jsfiddle

div动画使用过渡

4 个答案: