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 目标将保留由执行期间遇到的最后一个关键帧设置的计算值。最后一个关键帧取决于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 无法动画，它会从一个值切换到另一个值。只有可以分割的值才能逐位动画。

Answer 2

动画结束时为100％：

100% {

    text-align: center;

}

你需要说animation-fill-mode: forwards;以避免重新开始

Answer 3

您也可以添加100％并向前方提及动画方向，如下所述。

p {
    animation: sample 3s forwards;
    }

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

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

3 个答案: