Javascript 使用过渡的div动画

我想在从左向右移动时设置div的动画 div移动良好，但没有动画 它非常快 此外，我在悬停时为div指定了top和right属性，但它没有发生

HTML:

我需要轻松地移动div，然后慢慢地

试试这个，效果很好

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

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

---

jsiddle

首先，您需要为起始位置定义

right

，例如

right:calc（100%-100px）


.wrap{
宽度：100%；
高度：100px；
背景：橙色；
}
.立方体{
宽度：100px；
高度：100px；
背景：红色；
右：计算（100%-100px）；
过渡财产：权利；
过渡时间：10秒；
-webkit转换属性：右；/*Safari*/
-webkit转换持续时间：2s；/*Safari*/
过渡时间功能：轻松；
位置：绝对位置；
}
.wrap:hover.cube
{
右：30px；
}
将右边、左边替换为左边距


div
{
宽度：100px；
高度：100px；
背景：红色；
过渡属性：左边距；
过渡时间：2s；
-webkit转换属性：左边距；/*Safari*/
-webkit转换持续时间：2s；/*Safari*/
过渡时间函数：线性；
位置：绝对位置；
}
div:悬停
{
左边距：80%；/*使用左边距*/
顶部：10px；
}
您是否知道，我们可以通过将图形密集型CSS功能卸载到GPU，从而在浏览器中获得更好的渲染性能，从而加快硬件速度

尝试使用它，下面是一个带有
transform

如果要“转换”右属性和顶部属性，应在元素的未覆盖状态下定义它们
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;
}

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

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