<button>
    Go
  </button>

<div class="element">
  ✶
</div>
.flip-scale-down-diag-2 {
	animation: flip-scale-down-diag-2 0.5s linear both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-6-18 15:58:42
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes flip-scale-down-diag-2 {
  0% {
    transform: scale(1) rotate3d(-1, 1, 0, 0deg);
  }
  50% {
    transform: scale(0.4) rotate3d(-1, 1, 0, -90deg);
  }
  100% {
    transform: scale(1) rotate3d(-1, 1, 0, -180deg);
  }
}


body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
}
.element {
  background: #6A1B9A;
  color: white;
  border-radius: 8px;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  font-size: 40px;
}
button {
  position: absolute;
  top: 10px;
  left: 10px;
}
const button = document.querySelector("button");
button.addEventListener("click", e => {
  document.querySelector(".element").classList.toggle("flip-scale-down-diag-2")
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.