animatonについて

Question

divが左右にいったりきたりします
右にいってる時は右、
左にいってる時は左と判定し表示したいのですが
EventListenerでanimationが動いている最中のプロパティを読み取る方法がわかりません
一つならまだしもdivが複数要素ある場合などどのような手法がいいのでしょうか

<script>
window.onload=function(){
a.addEventListener('animationstart', () => {
//animationiterationなどもあるが動作中のプロパティを読み取れるものではなさそうでした
});
}
</script>

<style>

.a {
  animation: a 5s infinite linear;
  width:100px;
  height:100px;
  background:red;
  position:absolute;
  left:30%;
}

@keyframes a {
  0%   { transform:translateX(0%); }
  15%  { transform:ranslateX(100%); }
  50%  { transform:translateX(-10%); }
  100% { transform:translateX(0%); }
}
</style>

<div id="a" class="a">
</div>

Comments

[ypp]

15%のところ、ranslateではなくtranslateですね。

Answer 1

とりあえず自分の位置をカスタムデータに保持しておけばよいのでは？
（どうしたいのか書いてないので適当に）

<script>
window.addEventListener('DOMContentLoaded', function(e){
  setInterval(()=>{
    document.querySelectorAll('.a').forEach(x=>{
      const prev=x.dataset.left??0;
      const current=x.getBoundingClientRect().left;
      x.textContent=prev==current?"stop":(prev<current?"right":"left");
      x.dataset.left=current;
    });
  },100);
});
</script>

<style>

.a {
  animation: a 5s infinite linear;
  width:100px;
  height:100px;
  position:absolute;
}
.a1 {
  background:yellow;
  left:30px;
}
.a2 {
  background:lime;
  left:100px;
  top:100px;
}
.a3 {
  background:aqua;
  left:50%;
  top:200px;
  top:20px;
}

@keyframes a {
  0%   { transform:translateX(0%); }
  15%  { transform:translateX(100%); }
  50%  { transform:translateX(-10%); }
  60%  { transform:translateX(-10%); }
  100% { transform:translateX(0%); }
}
</style>
<div class="a a1"></div>
<div class="a a2"></div>
<div class="a a3"></div>
</div>