Replacing text in CSS

Question

I'm trying to make an animation loop in CSS that will change a class-defined h1 text into something else, 4 times.

Basically, I want a certain text to change from "hard-working" to "tired" after 1s, then to "coffee-addicted" and then to "fast-paced", and loop indefinitely. I've come up with code, but it doesn't work. I'm new to animating, so I could use an expert mind!

I've tried two approaches but neither work :(

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

Number 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

Thanks in advance!

Edit: if visualization helps: https://i.sstatic.net/8MW65.jpg

Itay Ganor · Accepted Answer · 2017-04-17 13:28:10Z

4

apply the animation on a :before pseudo element:

   .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

answered Apr 17, 2017 at 13:28

Itay Ganor

4,2053 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andy Over a year ago

Thanks a million!

Andy Over a year ago

Any idea why the text being replaced isn't affected by font-variant="bold"; ?

Itay Ganor Over a year ago

font-weight* :)

Andy Over a year ago

Oh okay, interesting. font-variant worked a few lines of code up but not here. Thanks a bunch, anyways!

Collectives™ on Stack Overflow

Replacing text in CSS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related