我使用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的错误，因为我可以将text-align：center设置为div。
尝试一下。 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>,
我不知道这是否是您想要的效果，但是您可以为该位置设置动画
.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>