<div class="c-animation">
  <button class="c-animation__start">
    ボタンをクリックで再生
  </button>
  <p class="c-animation__heading">CSS animation</p>
  <div class="c-animation__item"></div>
  <p class="c-animation__log"></p>
</div>

.c-animation {
  padding: 30px 15px;
}

.c-animation__start {
  font-size: 24px;
  font-weight: bold;
  padding: 10px 20px;
  color: #fff;
  border-radius: 5px;
  background: #149072;
  text-align: center;
  margin-bottom: 20px;
}

.c-animation__heading {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: 1px solid #000;
  margin-bottom: 25px;
}

.c-animation__item {
  width: 50%;
  height: 100px;
  background: #E4357B;
  transform-origin: left center;
  &.is-animated {
    animation: sample01 2s ease-out 5;
  }
  // transform:scaleX(0);
}

.c-animation__log {
  font-size: 16px;
  margin-top: 15px;
  line-height: 1.4;
  background: #eee;
  padding: 10px;
}

@keyframes sample01 {
  0% {
    transform:scaleX(0);
  }
  100% {
    transform:scaleX(1);
  }
}
let target = document.querySelector('.c-animation__item');
let log = document.querySelector('.c-animation__log');

document.querySelector('.c-animation__start').addEventListener('click', () => {
  target.classList.add('is-animated');
});

//アニメーション開始した時
target.addEventListener('animationstart', () => {
  log.insertAdjacentHTML('beforeend', 'CSS animationスタート<br>');
});

//アニメーション繰り返した時
let count = 0;
target.addEventListener('animationiteration', () => {
  count++
  log.insertAdjacentHTML('beforeend', 'CSS animetionループ'+count+'回<br>');
});

//アニメーション終了した時
target.addEventListener('animationend', () => {
  log.insertAdjacentHTML('beforeend', 'CSS animationエンド<br>');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.