css动画 translate

transform: translate(x, y);

/* 确保没有其他 CSS 属性影响元素位置 */
.element {
  position: relative; /* 或 absolute/fixed */
  transform: translate(50px, 50px);
}

/* 使用 will-change 提示浏览器提前优化 */
.element {
  will-change: transform;
  animation: move 1s linear infinite;
}

@keyframes move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

/* 使用 vendor prefixes 确保兼容性 */
.element {
  -webkit-transform: translate(50px, 50px); /* Safari 和 Chrome */
  -moz-transform: translate(50px, 50px); /* Firefox */
  -ms-transform: translate(50px, 50px); /* Internet Explorer */
  -o-transform: translate(50px, 50px); /* Opera */
  transform: translate(50px, 50px);
}