css - Safari 问题中的动画文本对齐更改

Question

我使用 CSS 关键帧和动画来设置 text-align 的动画，但此属性的动画不会在 Safari 中“播放”，但文本的颜色会发生变化。

div {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  animation: ani 5s 1 both linear;
}

@keyframes ani {
  0% {
    text-align: right;
    color: red;
  }
  50% {
    text-align: center;
    color: blue;
    text-decoration: underline;
  }
  100% {
    color: green;
  }
}

<div>
abcd
</div>

codesandbox

也许这是 Safari 的一个错误，因为我可以将 text-align: center 设置为 div。

Answer 1

试试这个。 browser prefix 会帮助你。经过测试的 Safari 5.1.7

    .abcz {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  -webkit-animation: ani 5s 1 both linear;
          animation: ani 5s 1 both linear;
}

@-webkit-keyframes ani {
  0% {
    text-align: right;
    color: red;
  }
  50% {
    text-align: center;
    text-align: -webkit-center;
    color: blue;
    text-decoration: underline;
  }
  100% {
    color: green;
  }
}

@keyframes ani {
  0% {
    text-align: right;
    color: red;
  }
  50% {
    text-align: center;
    text-align: -webkit-center;
    color: blue;
    text-decoration: underline;
  }
  100% {
    color: green;
  }
}

<div class="abcz">
abcd
</div>