.grid {
  display: table;
}
.grid > div {
  display: table-cell;
  min-width: 350px;
}
.demo-block {
  display: block;
  height: 300px;
  width: 300px;
  background: red;
  overflow: hidden;
}
.transition {
  transition: background 0.3s, height 1.3s, opacity 1.3s;
}
.transition.transition-appear,
.transition.transition-enter {
  opacity: 0;
}
.transition.transition-appear.transition-appear-active,
.transition.transition-enter.transition-enter-active {
  opacity: 1;
}
.transition.transition-leave-active {
  opacity: 0;
  background: green;
}
.animation {
  -webkit-animation-duration: 1.3s;
          animation-duration: 1.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.animation.animation-appear,
.animation.animation-enter {
  -webkit-animation-name: enter;
          animation-name: enter;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.animation.animation-appear.animation-appear-active,
.animation.animation-enter.animation-enter-active {
  -webkit-animation-name: enter;
          animation-name: enter;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.animation.animation-leave {
  -webkit-animation-name: leave;
          animation-name: leave;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.animation.animation-leave.animation-leave-active {
  -webkit-animation-name: leave;
          animation-name: leave;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.hidden {
  display: none;
}
@-webkit-keyframes enter {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes enter {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes leave {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes leave {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}


/*# sourceMappingURL=CSSMotion.css.map*/