该代码为文本“ Hello World!”播放动画,在动画开始时,文本颜色为红色。然后在25%处变为蓝色,在50%处变为居中。
但是,当动画结束时,文本将移回起始位置,并且未对齐中心。
所以,这是我的代码:
p {
animation-name:sample;
animation-duration:3s;
}
@keyframes sample {
0% {color:red;}
50% {color:blue;}
75% {text-align:center;}
}
我的代码在哪里出问题?
最佳答案
您需要将animation-fill-mode
设置为forwards
:https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
forwards
目标将保留执行期间遇到的最后一个关键帧设置的计算值。最后一个关键帧取决于animation-direction和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
无法设置动画,它将从一个值切换到另一个。只有可以划分的值才能逐位设置动画。关于html - 如何设置文本在动画结束时居中对齐?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47253711/