如何在不使用关键帧动画循环的情况下更改内容
How can I change the content without looping using keyframe animation
知道如何在不循环的情况下更改文本吗?我不想在动画中使用 infinite
。
.text {
animation: changeText 5s infinite;
}
@keyframes changeText {
0% {
content: '';
}
50% {
content: 'First Paragraph';
}
100% {
content: 'Second Paragraph';
}
}
<div class="text">Change me</div>
您只需从 animation: changeText 5s infinite
中删除参数 infinite
。而且,如果您使用 css 动态更改文本,则需要使用伪 class :before
或 :after
。像那样:
.text:before {
content: '';
animation: changeText 5s;
}
这是一个简单的例子。
.text:before {
content: '';
animation: changeText 5s;
}
@keyframes changeText {
50% {
content: 'First Paragraph';
}
100% {
content: 'Second Paragraph' ;
}
}
<div class="text"></div>
知道如何在不循环的情况下更改文本吗?我不想在动画中使用 infinite
。
.text {
animation: changeText 5s infinite;
}
@keyframes changeText {
0% {
content: '';
}
50% {
content: 'First Paragraph';
}
100% {
content: 'Second Paragraph';
}
}
<div class="text">Change me</div>
您只需从 animation: changeText 5s infinite
中删除参数 infinite
。而且,如果您使用 css 动态更改文本,则需要使用伪 class :before
或 :after
。像那样:
.text:before {
content: '';
animation: changeText 5s;
}
这是一个简单的例子。
.text:before {
content: '';
animation: changeText 5s;
}
@keyframes changeText {
50% {
content: 'First Paragraph';
}
100% {
content: 'Second Paragraph' ;
}
}
<div class="text"></div>