@keyframes demoSample {
  0% {
    transform: none;
  }

  25% {
    transform: translate(25%, 35%);
  }

  50% {
    transform: rotate(400deg) translate(25%, 35%);
  }

  75% {
    transform: scale(2, 2) rotate(400deg) translate(25%, 35%);
  }

  100% {
    transform: scale(1, 1) rotate(-400deg) translate(0, 100%);
  }
}

#css-keyframes {
  .box {
    &.active {
      transform-origin: center center;
      animation: 3s demoSample ease-in-out;
    }
  }
}