Html 使用 CSS3 动画更改文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42236440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change text with a CSS3 animation?
提问by user7548189
In my website I want to have a header that fades in and out, then in with different text, then out, then back to normal (looped). Here's how I would like it to work:
在我的网站中，我想要一个淡入淡出的标题，然后以不同的文本进入，然后退出，然后恢复正常（循环）。这是我希望它的工作方式：
h1 {
font-size: 600%;
animation-name: head;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; innerHtml="Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; innerHtml="Original Text"}
}
However, I haven't found any way to change the text within a CSS3 animation. Is this possible?
但是，我还没有找到任何方法来更改 CSS3 动画中的文本。这可能吗？
回答by Donnie D'Amato
There's two ways you could do this. One is to have the content managed by a pseudo element. This means that the displayed content would be applied inside CSS; like this:
有两种方法可以做到这一点。一种是让内容由伪元素管理。这意味着显示的内容将应用到 CSS 中；像这样：
CSS
CSS
h1:before{
content: 'Original Text';
font-size: 600%;
animation-name: head;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; content: "Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; content: "Original Text"}
}
The other way you could do this is by having two elements in the HTML and toggling between them. You'd need two animations to be working together to do this or you might be able to just offset one animation, like this:
另一种方法是在 HTML 中包含两个元素并在它们之间切换。您需要两个动画一起工作才能做到这一点，或者您可以只偏移一个动画，如下所示：
HTML
HTML
<header>
<h1 class="headtext" id="text1">Original Text</h1>
<h1 class="headtext" id="text2">Changed Text</h1>
</header>
CSS
CSS
.headtext{
font-size: 600%;
animation-name: head;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#text2{
animation-delay: 2s;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
50% {font-size:0; opacity:0;}
100% {font-size:600%;opacity:1;}
}
I've reduced the font-sizeto 0to give room for the other text to come in. This may be a different effect than you might want though.
我已将 减少font-size到0为其他文本留出空间。不过，这可能与您想要的效果不同。
回答by ross rykov
Hour ago, been stuck with same question but my decision is this. Just pasted a part of my own code. Check it out, guys!
一个小时前，被困在同样的问题上，但我的决定是这样的。刚刚粘贴了我自己的代码的一部分。看看吧，伙计们！
body {
margin: 0;
font-family: sans-serif;
}
#wrapper {
background-color: #051E3E;
height: 100vh;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#hi {
animation: pulse 5s;
}
@keyframes pulse {
0% {
color: #051E3E;
}
10% {
color: #051E3E;
}
30% {
color: white;
}
50% {
color: #051E3E;
}
60% {
color: #051E3E;
}
80% {
color: white;
}
100% {
color: #051E3E;
}
}
#hi:after {
content: "";
animation: spin 5s linear;
}
@keyframes spin {
0% { content:"Hi";?}
100% { content:"How do you like it?";?}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<p id="hi"></p>
</div>
</body>
</html>