18

In my website I want to have a header that fades in and out, then in with different text, then out, then back to normal (looped). Here's how I would like it to work:

h1 {
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes head {
0% {font-size:600%; opacity:1;}
25% {font-size:570%; opacity:0;}
50% {font-size:600%; opacity:1;}
65% {font-size:570%; opacity:0;}
80% {font-size:600%; opacity:1; innerHtml="Changed Text"}
90% {font-size:570%; opacity:0;}
100% {font-size:600%;opacity:1; innerHtml="Original Text"}
}

However, I haven't found any way to change the text within a CSS3 animation. Is this possible?

user7548189
  • 996
  • 6
  • 15
  • 30
  • Wanted to do the same thing but instead of CSS, I used jQuery. Not for everyone and not CSS but you can do $('#SomeElement').hide().text('Some Text Animation').fadeIn(300); – frenchie Sep 30 '17 at 15:09

2 Answers2

22

Hour ago, been stuck with same question but my decision is this. Just pasted a part of my own code. Check it out, guys!

body {
 margin: 0;
 font-family: sans-serif;
}

#wrapper {
 background-color: #051E3E;
 height: 100vh;
 color: white;
 display: flex;
 justify-content: center;
 align-items: center;
}

#hi {
 animation: pulse 5s;
}

@keyframes pulse {
 0% {
 color: #051E3E;
 }
 10% {
  color: #051E3E;
 }
 30% {
  color: white;
 }
 50% {
  color: #051E3E;
 }
 60% {
  color: #051E3E;
 }
 80% {
  color: white;
 }
 100% {
  color: #051E3E;
 }
}

#hi:after {
 content: "";
 animation: spin 5s linear;
}

@keyframes spin {
  0% { content:"Hi"; }
  100% { content:"How do you like it?"; }
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
 <div id="wrapper">
  <p id="hi"></p>
 </div>
 
</body>
</html>
ross rykov
  • 339
  • 2
  • 7
18

There's two ways you could do this. One is to have the content managed by a pseudo element. This means that the displayed content would be applied inside CSS; like this:

CSS

h1:before{
    content: 'Original Text';
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes head {
    0% {font-size:600%; opacity:1;}
    25% {font-size:570%; opacity:0;}
    50% {font-size:600%; opacity:1;}
    65% {font-size:570%; opacity:0;}
    80% {font-size:600%; opacity:1; content: "Changed Text"}
    90% {font-size:570%; opacity:0;}
    100% {font-size:600%;opacity:1; content: "Original Text"}
}

The other way you could do this is by having two elements in the HTML and toggling between them. You'd need two animations to be working together to do this or you might be able to just offset one animation, like this:

HTML

<header>
    <h1 class="headtext" id="text1">Original Text</h1>
    <h1 class="headtext" id="text2">Changed Text</h1>
</header>

CSS

.headtext{
    font-size: 600%;
    animation-name: head;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#text2{
    animation-delay: 2s;
}

@keyframes head {
    0% {font-size:600%; opacity:1;}
    50% {font-size:0; opacity:0;}
    100% {font-size:600%;opacity:1;}
}

I've reduced the font-size to 0 to give room for the other text to come in. This may be a different effect than you might want though.

Donnie D'Amato
  • 3,832
  • 1
  • 15
  • 40
  • 1
    I don't know why but the keyframes are overlapping and the words are changing before the fade out/in. Even if I go from 0 opacity to 1 opacity keyframe 0% - 10% the put a buffer of opacity 0 on 15% before fading in again on 25%, the text is still jumping. – GibsonFX Apr 03 '17 at 19:07
  • The given solution is NOT working for Safari or iOS as it is not possible to animate the `content` property of a pseudo element here. The solution above indeed works well for Chrome, Firefox and Opera. See https://stackoverflow.com/a/40083297/1280289 for an alternative way to solve this. – Kevin Katzke Jan 02 '20 at 12:53