keyframeを用いて表示させる文字のアニメーション


keyframe
animationをもちいてboxに表示させる文字を”A”→”B”→”C”→”D”->E""と変化させたいのですがcssのkeyframeからtext自体を変える方法がわかりません

[code]

    <body>
      <p>A->B->c->D</p>
      <button onclick="start()">start</button>
      <div class="box" id="b">here!</div>
    </body>
    
[/code]

考え方からわかりません。  
jqueryでonclick startしたのち文字をコードをして取得すればいいのか、  
そのままarrayで配列すればいいのか。

[code]

    .box {
      padding-top: 30px;
      width: 200px;
      height: 80px;
      background: #ecc;
      font-weight: bold;
      font-size: 250%;
      text-align: center;
      animation-name: c;
      animation-duration: 3s;
      animation-timin-function: ease-in;
      animation-delay: 1s;
      animation-fill-mode: both;
      -webkit-animation: a 3s ease-in 1s both;
    }
    
[/code]

以下のコードのようにkeyframeのtext自体を変えたいです。  
（イメージです）

[code]

    .c {
      @keyframes c {
        0% {
          [text: A]
        }
        25% {
          [text: B]
        }
        50% {
          [text: C]
        }
        75% {
          [text: D]
        }
        100% {
          [text: E]
        }
      }
      @-webkit-keyframes c {
        0% {
          [text: A]
        }
        25% {
          [text: B]
        }
        50% {
          [text: C]
        }
        75% {
          [text: D]
        }
        100% {
          [text: E]
        }
      }
    }
    
[/code]




CSSはウェブページのスタイルを指定するための言語なので、基本的にコンテンツを変更することはできません。

”A”→”B”→”C”と文字を変化させるアニメーションを作成したい場合には、その文字の数だけ要素を用意しておく必要があります。

[code]

    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    
[/code]

後は`position:absolute;`によってそれぞれの要素を重ねあわせ`animation-
delay`を利用してアニメーションを開始するタイミングをずらしてあげれば変化する文字のアニメーションが完成します。

[code]

    .animate div {
      width: 100px;
      height: 100px;
      font-size: 100px;
      background-color: red;
      text-align: center;
      opacity: 0;
      position: absolute;
      -webkit-animation-name: example;
      /* Chrome, Safari, Opera */
      -webkit-animation-duration: 4s;
      /* Chrome, Safari, Opera */
      -webkit-animation-iteration-count: infinite;
      animation-name: example;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }
    
    .animate div:nth-child(1) {
      background-color: red;
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }
    
    .animate div:nth-child(2) {
      background-color: blue;
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
    }
    
    .animate div:nth-child(3) {
      background-color: green;
      -webkit-animation-delay: 3s;
      animation-delay: 3s;
    }
    
    .animate div:nth-child(4) {
      background-color: yellow;
      -webkit-animation-delay: 4s;
      animation-delay: 4s;
    }
    
    
    /* Chrome, Safari, Opera */
    
    @-webkit-keyframes example {
      0% {
        opacity: 0;
      }
      25% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    
    
    /* Standard syntax */
    
    @keyframes example {
      0% {
        opacity: 0;
      }
      25% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
[/code]

[code]

    <div class='animate'>
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
    </div>
[/code]

上記URLのサンプルの注意点としては、要素の数が変わるとアニメーションキーフレームのパーセンテージのバランスも変化させなければならないことでしょうか。

