【问题标题】：Change text with a CSS3 animation?使用 CSS3 动画更改文本？
【发布时间】：2019-05-20 23:34:49
【问题描述】：

在我的网站中，我希望有一个淡入淡出的标题，然后使用不同的文本，然后淡出，然后恢复正常（循环）。这是我希望它的工作方式：

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"}
}

但是，我还没有找到任何方法来更改 CSS3 动画中的文本。这可能吗？

【问题讨论】：

想做同样的事情，但我使用了 jQuery 而不是 CSS。不适合所有人，也不适合 CSS，但你可以这样做 $('#SomeElement').hide().text('Some Text Animation').fadeIn(300);

标签： html css css-animations

【解决方案1】：

有两种方法可以做到这一点。一种是让内容由伪元素管理。这意味着显示的内容将应用在 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"}
}

另一种方法是在 HTML 中添加两个元素并在它们之间切换。您需要两个动画协同工作才能做到这一点，或者您可以只偏移一个动画，如下所示：

HTML

<header>
    <h1 class="headtext" id="text1">Original Text</h1>
    <h1 class="headtext" id="text2">Changed Text</h1>
</header>

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;}
}

我已将 font-size 减少到 0 以便为其他文本留出空间。但这可能与您想要的效果不同。

【讨论】：

我不知道为什么，但关键帧是重叠的，并且在淡出/淡入之前单词正在改变。即使我从 0 不透明度到 1 不透明度关键帧 0% - 10% 将不透明度 0 的缓冲区放在 15% 上，然后在 25% 上再次淡入，文本仍在跳跃。
给定的解决方案不适用于 Safari 或 iOS，因为无法在此处为伪元素的 content 属性设置动画。上面的解决方案确实适用于 Chrome、Firefox 和 Opera。请参阅stackoverflow.com/a/40083297/1280289 了解解决此问题的替代方法。

【解决方案2】：

一小时前，我遇到了同样的问题，但我的决定是这样的。刚刚粘贴了我自己的代码的一部分。小伙伴们快来看看吧！

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>

【讨论】：