

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]


CC BY-SA 4.0
2015-04-21T16:45:10.977
9410
2019-12-13T13:27:51.053
2019-12-13T13:26:26.183
32986
9422
question
jquery css
keyframeを用いて表示させる文字のアニメーション


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


CC BY-SA 4.0
2015-04-21T20:25:33.690
9413
2019-12-13T13:27:51.053
2019-12-13T13:27:51.053
32986
8351
9410
answer


不連続なアニメーションにしたいときは、animation-timing-functionにstepsを使います。  
パラパラ漫画のように使えます。

[code]

    p {
      font-size: 5em;
      width: 1em;
      height: 1em;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      background-color: pink;
      margin: 0.5em auto;
      animation: moji 5s steps(5,end) infinite;
    }
    @keyframes moji {
      100% {
        text-indent: -5em;
      }
    }
[/code]

[code]

    <p>あいうえお</p>
[/code]


CC BY-SA 3.0
2015-10-11T18:27:17.457
17540
2015-10-11T18:27:17.457
12727
9410
answer