用CSS3动画改变文字？

Question

在我的网站中，我希望有一个淡入淡出的标题，然后用不同的文本，然后出来，然后回到正常（循环）。下面是我希望它的工作原理：

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动画中的文本。这可能吗？

Answer 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，以便为其他文本提供空间。这可能与您想要的效果不同。