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

これを行うには2通りの方法があります。 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での2つの要素を有し、かつそれらの間で切り替えることです。あなたはこれを行うために一緒に仕事ができること2つのアニメーションを必要とするだろうか、ちょうどこのように、1つのアニメーションを相殺することができるかもしれない：私はしました

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

HTML font-sizeを0に減らし、他のテキストが入る余地を与えました。これはあなたが望むよりも異なる効果があります。