<div class="c-transition">
  <button class="c-transition__start">
    ボタンをクリックで再生
  </button>
  <p class="c-transition__heading">CSS transition</p>
  <div class="c-transition__item"></div>
  <p class="c-transition__log"></p>
</div>

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

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

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

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

.c-transition__log {
  font-size: 16px;
  margin-top: 15px;
  line-height: 1.4;
  background: #eee;
  padding: 10px;
}
let target = document.querySelector('.c-transition__item');
let log = document.querySelector('.c-transition__log');

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

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.