title: Change text with a CSS3 animation?
body: <p>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:</p>
  
  <pre><code>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"}
  }
  </code></pre>
  
  <p>However, I haven't found any way to change the text within a CSS3 animation. Is this possible?</p>