JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div class="square"></div>

CSS

body {
  background-color: blue;
}

@keyframes fold {
  0% {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 0, 90deg); 
  }
}

.square {
  width: 100px;
  height: 100px;
  position: relative;
  background-image: linear-gradient(45deg, blue 0%, blue 50%, aqua 50%, aqua 100%);
  /* box-shadow: inset 0 0 10px #000000; */
}

.square::before,
.square::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.square::before {
  background-color: blue;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-name: fold;
  animation-timing-function: cubic-bezier(0.7, 0, 1, 1);
}

.square::after {
  background-image: linear-gradient(45deg, white 0%, white 50%, transparent 50%, transparent 100%);
  animation-duration: 1.5s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
  animation-direction: reverse;
  animation-name: fold;
  animation-timing-function: cubic-bezier(0.7, 0, 1, 1); /* Because it's reversed so this is actually the same as the ::before */
  transform: rotate3d(1, 1, 0, 90deg); /* Set it's starting postion to rotated */
}