p.state_txt.js-stateTxt
  | アニメーション中だよ!
.container
  .item.js-item
View Compiled
.state_txt {
  text-align: center;
  &.is-end {
    color: red;
  }
}
.container {
  height: 300px;
  
}
.item {
  width: 50px;
  height: 50px;
  margin: 50px auto 0;
  background-color: #123;
  border-radius: 5px;
  animation: animeSample 1s ease .5s forwards;
}
@keyframes animeSample {
  0% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(50px, 10px, 0); }
  80% { transform: translate3d(-50px, 10px, 0); }
  100% { transform: translate3d(0, -40px, 0); }
}
View Compiled
  $('.js-item').on('transitionend animationend', function() {
    $('.js-stateTxt').text('アニメーション終わり!').addClass('is-end');
  });
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js