flip cards in css onclick

flip-cards.html

        <div class="flip-container" onclick="this.classList.toggle('hover');">
          <div class="flipper">
            <div class="inner-card">
              <div class="front">
                aa
              </div>
              <div class="back">
                bb
              </div>
            </div>
            <!-- .inner-card -->
          </div>
          <!-- .flipper -->
        </div>

flip-cards.js

    $('.flip-container').on('click', function() {
      var $this = $(this);
      $this.toggleClass('hover');
      if ($this.hasClass('changed')) {

        $this.removeClass('changed');

      } else {

        setTimeout(function() {
          $this.toggleClass('changed');
          console.log('ccc');
        }, 600);
      }



    });

flip-cards.scss

/////////////////
//  ONLY FLIP
////////////////
.flip-container {
  cursor: pointer;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  .flipper {
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
    @include transform(perspective(1000px) rotateY(0deg));
  }
  .front,
  .back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    top: 0;
    left: 0;
  }
  .front {
    position: relative;
    @include transform(perspective(1000px) rotateY(0deg));
  }
  .back {
    position: absolute;
    @include transform(perspective(1000px) rotateY(-180deg));
  }
  &.hover .flipper {
    @include transform(perspective(1000px) rotateY(-180deg));
  }
  &.changed {
    .back {
      backface-visibility: visible;
      -webkit-backface-visibility: visible;
    }
  }
} //---end flipcontainer