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>

代码沙箱

也许这是Safari的错误，因为我可以将文本align:center设置为div。

Answer 1

试试这个。browser prefix将帮助您。经过测试的safari5.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>

Answer 2

我不知道这是否是你想要的效果，但你可以设置位置的动画

.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>