使用过渡的 div 动画答案

【问题标题】：div animation using transition使用过渡的 div 动画
【发布时间】：2017-01-10 16:14:43
【问题描述】：

我想在从左到右移动时为 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

【问题讨论】：

如果你想“转移”右和上属性，你应该在元素的非悬停状态下定义它们

标签： javascript html css

【解决方案1】：

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

.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;
}

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

将 right,left 替换为 margin-left。

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

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

【讨论】：

【解决方案4】：

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

尝试使用它，这里是transform的例子

jsfiddle

【讨论】：