Safari CSS 动画多次翻译不起作用答案

【问题标题】：Safari CSS Animation Multiple Translates Not WorkingSafari CSS 动画多次翻译不起作用
【发布时间】：2018-02-16 12:33:16
【问题描述】：

我有以下代码可以在除 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.

【问题讨论】：

标签： css safari css-animations mobile-safari

【解决方案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。

【讨论】：