html - 如何将文本设置为在动画结束时居中对齐？

Question

此代码为文本“Hello World!”播放动画，在动画开始时，文本颜色为红色。然后在 25% 时，它变为蓝色，在 50% 时，它变为居中对齐。

但是当动画结束时，文本会移回起始位置并且不会居中对齐。

所以，这是我的代码:

p {
animation-name:sample;
animation-duration:3s;
}

@keyframes sample {
0% {color:red;}
50% {color:blue;}
75% {text-align:center;}
}

我的代码哪里出了问题？

Answer 1

您需要将animation-fill-mode 设置为forwards : https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

forwards The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe depends on the value of animation-direction and animation-iteration-count:

p {
animation-name:sample;
animation-duration:3s;
animation-fill-mode:   forwards ;
}

@keyframes sample {
0% {color:red;}
50% {color:blue;}
75%, 100% {text-align:center;}
}

<p>text to colorize then center</p>

text-align 不能是动画的，它会从一个值切换到另一个值。只有可以除的值才能逐位动画。