css动画位移制作
CSS 动画位移的实现方法
使用 transform: translate() 实现位移
通过 translateX()、translateY() 或 translate() 函数控制元素在水平、垂直或任意方向的位移。结合 @keyframes 定义动画关键帧，示例代码如下：
.box {
width: 100px;
height: 100px;
background: blue;
animation: move 3s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}使用 position 属性与 top/left
通过改变元素的定位属性实现位移，需将元素设为 position: relative 或 absolute，再调整 top、left 等值：
.box {
position: relative;
animation: slide 2s ease-in-out infinite;
}
@keyframes slide {
0% { left: 0; }
50% { left: 150px; }
100% { left: 0; }
}结合 transition 实现平滑过渡
适用于交互触发的位移（如悬停），通过 transition 指定过渡属性和时长：
.button {
transition: transform 0.5s ease;
}
.button:hover {
transform: translateY(-10px);
}多方向复合位移
在 translate() 中同时设置 X 轴和 Y 轴位移，或使用 translate3d() 添加 Z 轴（启用硬件加速）：
@keyframes diagonal {
to { transform: translate(100px, 50px); }
}注意事项
- 优先使用
transform而非position，因前者不会触发重排，性能更优。 - 通过
animation-timing-function调整缓动效果（如ease-in-out）。 - 使用
will-change: transform可优化高频动画性能。
