css3 动画缓慢移动 |3种css区别

.box {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
transition: left 2s ease-in-out;
}
.box:hover {
left: 300px;
}

上面的代码中，大家定义了一个名为 box 的元素，其属性包括宽度、高度、位置和动画效果。其中 transition 属性被设置为 left 2s ease-in-out，表示 left 属性的变换需要用 2 秒来完成，并且采用 ease-in-out 缓动函数。这个函数的特点是慢开慢关，即初速度和末速度较慢，而中间速度较快。

在 hover 状态下，大家将 left 属性的值设为 300 像素，从而触发动画效果。因为大家设置了缓动函数，所以元素会逐渐移动到目标位置，速度在不断变慢直到最终停留。

需要注意的是，transition 属性只能控制可动画属性的变换，而且需要在 hover 等触发事件发生后才能起作用。此外，大家还可以设置多个属性的动画效果，如下：

.box {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
transition: left 2s ease-in-out, top 2s ease-in-out;
}
.box:hover {
left: 300px;
top: 200px;
}

上面的代码中，大家在 transition 属性中同时设置了 left 和 top 属性的变换效果，它们的动画时间和缓动函数相同。当大家触发 hover 事件时，这个元素会同时在左右和上下两个方向上移动。