Question

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

基本上，我希望某个文本在1s之后从“勤奋”变为“疲倦”，然后变为“咖啡上瘾”然后变为“快节奏”，并且无限循环。我提出了代码，但它不起作用。我是动画片的新手，所以我可以使用专家的心态！

我尝试了两种方法，但都没有工作:(

第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

替换CSS中的文本

1 个答案: