CSSのテキストを置き換える

Question

CSSでアニメーションループを作成しようとしていますが、これはクラス定義のh1テキストを別のものに4回変更します。

基本的に、あるテキストが1秒後に「勤勉」から「疲れ」に変わってから、「コーヒー中毒」に変わり、その後「ペースが速く」なり、無期限にループするようにします。私はコードを考え出したが、うまくいきません。私はアニメーション化するのが初めてなので、専門家の心を使うことができます！

私は2つのアプローチが、どちらも仕事:(

ナンバー1試してみた：

.animate{ 
display: inline; 
margin:0; 
padding: 0; 
border: 0; 
-webkit-animation-name: animate; 
-webkit-animation-duration: 2s; 
animation-name: animate; 
animation-duration: 2s; 
animation-delay: 1s; 
animation-iteration-count: infinite; 
} 


@keyframes animate{ 
0% {content: 'hard-working';} 
25%{content: 'tired';} 
50%{content: 'coffee-addicted';} 
75%{content:'fast-paced';} 
100%{content: 'hard-working';} 
} 

数を2：

.animate{ 
display: inline; 
margin:0; 
padding: 0; 
border: 0; 
-webkit-animation-name: animate; 
-webkit-animation-duration: 2s; 
animation-name: animate; 
animation-duration: 2s; 
animation-delay: 1s; 
animation-iteration-count: infinite; 
} 



@keyframes animate{ 
0% {content: 'hard-working';} 
25%{visibility: hidden; .animate:after{content:'tired'};} 
50%{visibility: hidden .animate:after{content:'coffee-addicted'};} 
75%{visibility: hidden; .animate:after{content:'fast-paced'};} 
100%{visibility: hidden; .animate:after{content: 'hard-working'};} 
} 

JsFiddle 1

JsFiddle 2

ありがとうございます！

編集：可視化の場合に役立ちます：https://imgur.com/a/TXFm2

Answer 1

が:before擬似要素にアニメーションを適用します。

.animate { 
 
     display: inline; 
 
     margin: 0; 
 
     padding: 0; 
 
     border: 0; 
 
    } 
 
    
 
    .animate:before { 
 
     content: 'hard-working'; 
 
     -webkit-animation-name: animate; 
 
     -webkit-animation-duration: 2s; 
 
     animation-name: animate; 
 
     animation-duration: 2s; 
 
     animation-delay: 1s; 
 
     animation-iteration-count: infinite; 
 
    } 
 
    
 
    @keyframes animate { 
 
     0% { 
 
      content: 'hard-working'; 
 
     } 
 
     25% { 
 
      content: 'tired'; 
 
     } 
 
     50% { 
 
      content: 'coffee-addicted'; 
 
     } 
 
     75% { 
 
      content: 'fast-paced'; 
 
     } 
 
     100% { 
 
      content: 'hard-working'; 
 
     } 
 
    }

<div class="animate"></div>

JSFiddle