我使用 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
会帮助你。经过测试的 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>
关于css - Safari 问题中的动画文本对齐更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58709832/