Анимированные изменения текста в выпуске 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

Я не знаю, пытаетесь ли вы получить эффект, но вы можете анимировать позицию

.abcz {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

.animated {
  position: absolute;
  animation: ani 5s 1 both linear;
}

@keyframes ani {
  0% {
    color: red;
    left: 100%;
    transform: translateX(-100%);
  }
  50% {
    color: blue;
    text-decoration: underline;
    left: 50%;
    transform: translateX(-50%);
  }
  100% {
    color: green;
    left: 0;
    transform: translateX(0);
  }
}

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

Answer 2

Попробуй это. browser prefix поможет вам. Проверенное сафари 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>