用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，以便爲其他文本提供空間。這可能與您想要的效果不同。