替换 CSS 中的文本

Question

我正在尝试在 CSS 中创建一个动画循环，它将类定义的 h1 文本更改为其他内容，4 次。

基本上，我希望某个文本在 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