フラップアニメーションのanimation-delayがうまく作用しません。他、フラップについて2点の質問

Question

先程も投稿させていただいたものと同じコードについて、
別途 わからない点がありましたので、投稿いたします。

ザ・ベストテンのパタパタとしたパネルの動きをwebサイトで使用したく、
Code Penからソースをコピーし、デザイン面で修正を加えています。
（参照元URL：https://codepen.io/jesusbotella/pen/opmRrO）

① 「AAA」と「BBB」のアニメーションのスピードに差をつけたいのですが、
data-animation-delay="1200ms" の部分を変えても作用しません。
足りない記述、誤った記述がありますでしょうか？

②スクロールをして、その場所に来たら、フラップのアニメーションが始まるようにするためには
どのような記述が必要でしょうか…？

③アニメーションが動いている間に、最終的に見せたい言葉以外のものを出させるには、
どうしたらよいでしょうか？？
JSの以下の部分でそのように設定できていると思ったのですが、実際は、「AAA」と「BBB」が回っているアニメーションになってしまいます。

function makeid() {
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

当方初心者のため、質問もうまくできているか不安ですが、ご回答いただけましたら幸いです。
よろしくお願いします。

<div class="splitflap-display">
<div class="split-flap" data-letter="AAA" data-animation-delay="1200ms"></div>
<div class="split-flap" data-letter="BBB" data-animation-delay="2000ms"></div></div>

@keyframes slidein {
  from {
    height: 0%;
  }

  to {
    height: 100%;
  }
}

.splitflap-display {
    display: flex;
    margin: 10px;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
    justify-content: center;
    align-content: center;
}

.split-flap {
  width: 100%;
  height: 4vw;
  border: 2px solid rgba(0, 0, 0, 0.2);
  position: relative;
  margin: 0 20px 20px 0;
  font-size: 2vw;
  line-height: 70px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}

.split-flap:after {
    content: ' ';
    width: 100%;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate3d(0, -50%, 0);
}

.split-flap:before {
  content: attr(data-letter);
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  position: absolute;
/*  transition: height 100ms linear;*/
  animation-duration: 120ms;
  animation-delay: attr(data-animation-delay);
  animation-name: slidein;
  animation-iteration-count: 6;
  overflow: hidden;
}

/*.split-flap.is-changing:before {
  height: 0;
}*/

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
function makeid() {
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

  return possible.charAt(Math.floor(Math.random() * possible.length));
}

function randomTime(){
  return Math.round(Math.random() * 200 );
}
function changeAnimationTime(element){
  var random = randomTime();
  element.setAttribute('animation-delay', random + "ms");
  
  console.log('animation-delay', random + "ms")
}


var mapFn = function(element) {
    changeAnimationTime(element);
  var i = 0;
  var originalAttribute = element.getAttribute('data-letter');
  var test = [makeid(), makeid(), makeid(), makeid(), makeid(), originalAttribute];
  element.addEventListener("animationend", function() {
    element.setAttribute('data-letter', originalAttribute);
  }, false);
  element.addEventListener("animationiteration", function() {
    element.setAttribute('data-letter', test[i++]);
  }, false);
};

var changingElements = Array.from(document.querySelectorAll('[data-letter]'), mapFn);
</script>

Answer 1

①

手元の、Firefox と Chrome で試してみましたが、無効のようでした。

attr() 関数はどの CSS プロパティでも使用することができますが、 content 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。

attr() - CSS: カスケーディングスタイルシート | MDN

---

②

Intersection Observer はいかがでしょう？

Intersection Observer API - Web API | MDN

---

③

ご提示のCodePenを見る限り、『「AAA」と「BBB」が回っているアニメーション』ではないようでした。

Comments

[_li____nu]

ご回答ありがとうございます！

① ご確認いただきありがとうございます。そうでしたか…別の方法を調べてみます。

② 調べてみます！

③ ややこしい言い方をして申し訳ありません。
　「AAA」には「第一位」という日本語が入り、「BBB」には、「デニムパンツ」と入ります。
　 CodePenでは1文字が回っていますが、そのwidthを広げて、長い単語がパタパタと回転して見えるようにしました。しかし、CodePenでは、「１」のパネルでも、アニメーションが止まるまでに「A」「B」などが出てきていて、そのようにしたい、ということでした。失礼しました。

[Lhankor_Mhy]

ご提示のコードで試していますが、「アニメーションが止まるまでに「A」「B」などが出てきていて」という現象はきちんと起きているように見えました。

[Lhankor_Mhy]

ご提示のコードで作ったサンプルです。

https://jsfiddle.net/Lhankor_Mhy/5c86auz1/

[_li____nu]

ほんとですね。。。ありがとうございます。原因を考えてみます。