[data-rotate="true"] {
  animation: rotateForward 1s ease-in-out forwards;
}

[data-rotate="false"] {
  animation: rotateBackward 1s ease-in-out forwards;
}

@keyframes rotateForward {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(90deg) scale(0.75);
  }
  100% {
    transform: rotate(180deg) scale(1);
  }
}

@keyframes rotateBackward {
  0% {
    transform: rotate(180deg) scale(1);
  }
  50% {
    transform: rotate(90deg) scale(0.75);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}