替換CSS中的文本

Question

我正在嘗試在CSS中製作一個動畫循環，將4次將類定義的h1文本更改爲其他內容。

基本上，我想要一段文字從「勤奮」變成「累」，然後是「咖啡上癮」，然後是「快節奏」，並無限循環。我已經提出了代碼，但它不起作用。我不熟悉動畫，所以我可以使用專家的心態！

我已經試過兩種方法但是沒有工作:(

數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