<div class="flipping-1"></div>
<div class="flipping-2"></div>
<div class="flipping-3"></div>
<div class="flipping-4"></div>
<div class="flipping-5"></div>
<div class="flipping-6"></div>
<div class="flipping-7"></div>
<div class="flipping-8"></div>
<div class="flipping-9"></div>
<div class="flipping-10"></div>
.flipping-1 {
  width: 40px;
  height: 40px;
  background:#000;
  transform:perspective(150px) rotateX(0);
  animation: f1 1s infinite;
}

@keyframes f1 {
  100% {transform:perspective(150px) rotateX(180deg)}
}

.flipping-2 {
  width: 40px;
  height: 40px;
  transform:perspective(150px) rotateX(0);
  animation: 
    f1-1 2s infinite linear,
    f1-2 1s infinite linear alternate;
}

@keyframes f1-1 {
  100% {transform:perspective(150px) rotateX(360deg)}
}

@keyframes f1-2 {
  0%,49.9% {background:#ffa516}
  50%,100% {background:#f03355}
}


.flipping-3 {
  width: 40px;
  height: 40px;
  transform:perspective(150px) rotateX(0) rotateY(0);
  animation: 
    f3-1 2s infinite linear,
    f3-2 3s infinite linear -.5s;
}

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

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

.flipping-4 {
  width: 60px;
  height: 60px;
  animation: f4-0 2s infinite linear;
}
.flipping-4::before {
  content:"";
  display:block;
  width:50%;
  height:50%;
  transform:perspective(150px) rotateX(0deg);
  transform-origin: bottom; 
  animation: 
    f4-1 0.5s infinite linear alternate,
    f4-2 0.5s infinite linear alternate;
}

@keyframes f4-0 {
  0%,24.99%  {transform:scale(1 , 1) rotate(0deg)}
  25%,49.99% {transform:scale(1 ,-1) rotate(90deg)}
  50%,74.99% {transform:scale(-1,-1) rotate(0deg)}
  75%,100%   {transform:scale(-1, 1) rotate(90deg)}
}


@keyframes f4-1 {
  100% {transform:perspective(150px) rotateX(180deg)}
}

@keyframes f4-2 {
  0%,49.9% {background:#ffa516}
  50%,100% {background:#f03355}
}

.flipping-5 {
  width: 60px;
  height: 60px;
  animation: f5-0 1s infinite linear;
}
.flipping-5::before,
.flipping-5::after {
  content:"";
  position: absolute;
  inset:0 50% 50% 0;
  transform:scale(var(--s,1)) perspective(150px) rotateX(0deg);
  transform-origin: bottom right; 
  animation: 
    f5-1 0.5s infinite linear alternate,
    f5-2 0.5s infinite linear alternate;
}
.flipping-5::after {
  --s:-1,-1;
}

@keyframes f5-0 {
  0%,49.99% {transform:scale(1, 1) rotate(0deg)}
  50%,100%  {transform:scale(1,-1) rotate(90deg)}
}


@keyframes f5-1 {
  100% {transform:scale(var(--s,1)) perspective(150px) rotateX(180deg)}
}

@keyframes f5-2 {
  0%,49.9% {background:#25b09b}
  50%,100% {background:#514b82}
}


.flipping-6 {
  width: 60px;
  height: 60px;
  color: #25b09b; 
  background:
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0);
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation: 
    f6-0   1.5s infinite linear alternate,
    f6-0-0 3s   infinite linear;
}
.flipping-6::before {
  content:"";
  display:block;
  width:50%;
  height:50%;
  background:currentColor;
  transform:perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right; 
  animation: f6-1 1.5s infinite linear alternate;
}


@keyframes f6-0 {
  0% ,32.99% {background-position: 0    100%,100% 100%,100% 0}
  33%,65.99% {background-position: 100% 100%,100% 100%,100% 0}
  66%,100%   {background-position: 100% 0   ,100% 0   ,100% 0}
}

@keyframes f6-0-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}


@keyframes f6-1 {
  16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
  33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
  66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
  100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}

.flipping-7 {
  width: 60px;
  height: 60px;
  color: #ffa516; 
  background:
    linear-gradient(currentColor 0 0) 100%  0,
    linear-gradient(currentColor 0 0) 0  100%;
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation:  f7-0 1s infinite linear;
}
.flipping-7::before,
.flipping-7::after {
  content:"";
  position: absolute;
  inset:0 50% 50% 0;
  background:currentColor;
  transform:scale(var(--s,1)) perspective(150px) rotateY(0deg);
  transform-origin: bottom right; 
  animation: f7-1 .5s infinite linear alternate;
}
.flipping-7::after {
  --s:-1,-1;
}

@keyframes f7-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}


@keyframes f7-1 {
  49.99% {transform:scale(var(--s,1)) perspective(150px) rotateX(-90deg) ;filter:grayscale(0)}
  50%    {transform:scale(var(--s,1)) perspective(150px) rotateX(-90deg) ;filter:grayscale(0.8)}
  100%   {transform:scale(var(--s,1)) perspective(150px) rotateX(-180deg);filter:grayscale(0.8)}
}

.flipping-8 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: f8-0 2s infinite linear;
}
.flipping-8::before,
.flipping-8::after {
  content:"";
  flex:1;
  animation: 
    f8-1 1s infinite linear alternate,
    f8-2 2s infinite linear -.5s;
}
.flipping-8::after {
  --s:-1,-1;
}

@keyframes f8-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}

@keyframes f8-1 {
  0%,
  5%   {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
}

@keyframes f8-2 {
  0%,49.99% {background:#f03355}
  50%,100%  {background:#ffa516}
}


.flipping-9 {
  width: 60px;
  height: 60px;
  color: #ffa516; 
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0);
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation: 
    f9-0   1.5s infinite linear alternate,
    f9-0-0 3s   infinite linear alternate;
}
.flipping-9::before {
  content:"";
  display:block;
  width:50%;
  height:50%;
  background:currentColor;
  border-top-left-radius: 100px;
  transform:perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right; 
  animation: f9-1 1.5s infinite linear alternate;
}


@keyframes f9-0 {
  0% ,32.99% {background-position: 0    100%,100% 100%,100% 0}
  33%,65.99% {background-position: 100% 100%,100% 100%,100% 0}
  66%,100%   {background-position: 100% 0   ,100% 0   ,100% 0}
}

@keyframes f9-0-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}


@keyframes f9-1 {
  16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
  33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
  66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
  100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}

.flipping-10 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: f10-0 2s infinite linear;
}
.flipping-10::before,
.flipping-10::after {
  content:"";
  flex:1;
  animation: 
    f10-1 1s infinite linear alternate,
    f10-2 2s infinite linear -.5s;
}
.flipping-10::after {
  --s:-1,-1;
}

@keyframes f10-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}

@keyframes f10-1 {
  0%,
  5%   {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
}

@keyframes f10-2 {
  0%,49.99% {background:#514b82;border-radius: 0}
  50%,100%  {background:#25b09b;border-radius: 100px 0 0 100px}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}
/* more loaders here: https://dev.to/afif/series/12889 */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.