Safari CSS 动画多重翻译不工作

Question

我的以下代码适用于除 Safari 以外的所有其他浏览器：

.background {
  width: 300px;
  height: 100px;
  background: cyan;

  transform: translateX(-42px) translateY(166px) skew(25deg);
  animation: background-anim 5s 0s step-end 2;
}

@keyframes background-anim {
  0%, 49%, 100% {
    transform: translateY(0) skew(25deg);
  }

  50%, 99% {
    transform: translateX(-42px) translateY(166px) skew(25deg);
  }
}

translateY() 有效，但 translateX() 在动画期间无效。然而它在动画之外工作（在它完成后）。

CodePen example.

Answer 1

我通过向第一个关键帧添加 translateX(0) 来修复它：

@keyframes background-anim {
  0%, 49%, 100% {
    transform: translateX(0) translateY(0) skew(25deg);
  }

  50%, 99% {
    transform: translateX(-42px) translateY(166px) skew(25deg);
  }
}

另一种方法是使用 translate(0,0) 和 translate(-42px, 166px) 而不是拆分成 X 和 Y。

Safari CSS 动画多重翻译不工作

Safari CSS Animation Multiple Translates Not Working

css

safari

mobile-safari

css-animations