<div id="wrap">

  <div class="block block--left"></div>
  <div class="block block--rite"></div>

</div>

//  autoprefixer: true

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #fff;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  outline: none;
}

.block {
  position: relative;
  width: 25vmin;
  height: 25vmin;
  margin: 20px;
  border-radius: 10px;
  background-color: #5ab267;
  opacity: 0;
  visibility: hidden;
  transition: 1s ease;
  box-shadow: 0 0 0 fade(#000, 0%);

  &--left {
    transform: translateX(calc(~'12.5vmin + 10px'));
  }

  &--rite {
    transform: translateX(calc(~'-12.5vmin - 10px'));
  }
}

#wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  &.state-0 {
    .block {
      opacity: 1;
      visibility: visible;

      &--left,
      &--rite {
        transform: translateX(0);
      }
    }
  }

  &.state-1 {
    .block {
      opacity: 1;
      visibility: visible;

      &--left {
        transform: translateX(calc(~'12.5vmin + 10px'));
      }

      &--rite {
        transform: scale(1.2);
        background-color: #1aa6d0;
        box-shadow: 0 0 20px fade(#000, 25%);
      }
    }
  }
  
  &.state-2 {
    .block {
      opacity: 1;
      visibility: visible;

      &--left {
        transform: translateX(0) scale(1.2);
        background-color: #ea922c;
        box-shadow: 0 0 20px fade(#000, 25%);
      }

      &--rite {
        transform: translateX(calc(~'-12.5vmin - 10px'));
      }
    }
  }
}

var i = 0;

$(function () {
  $('#wrap').click(function () {
    $('#wrap').attr('class', 'state-' + i);
    
    i++;

    if (i > 2) {
      i = 0;
    }
  });
});