css取文本-替换 CSS 中的文本

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

基本上css取文本，我希望文本从“努力工作”到“累”，然后“咖啡上瘾”，然后“快节奏”，无限循环。 我已经想出了代码，但它不起作用。 我是动漫新手css取文本，所以我可以用专家的态度！

我已经尝试过两种方法，但都不起作用:(

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

小提琴1

小提琴2

提前致谢！