<div class="flipping-3" style="animation: f3-1 2s infinite linear"></div>
+
<div class="flipping-3" style="animation: f3-2 3s infinite steps(1) -.5s"></div>
=
<div class="flipping-3"></div>

.flipping-3 {
  width: 90px;
  aspect-ratio: 1;
  background: #000;
  animation: 
    f3-1 2s infinite linear,
    f3-2 3s infinite steps(1) -.5s;
}

@keyframes f3-1 {
  0%   {transform: perspective(150px) rotateX(  0deg) rotateY(0deg)}
  50%  {transform: perspective(150px) rotateX(180deg) rotateY(0deg)}
  100% {transform: perspective(150px) rotateX(180deg) rotateY(180deg)}
}

@keyframes f3-2 {
  0%  {background: #ffa516}
  33% {background: #f03355}
  66% {background: #25b09b}
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  align-items: center;
  grid-auto-flow: column;
  gap: 40px;
  font-size: 50px;
  font-weight: bold;
}