<div class="dancers-1"></div>
<div class="dancers-2"></div>
<div class="dancers-3"></div>
<div class="dancers-4"></div>
<div class="dancers-5"></div>
<div class="dancers-6"></div>
<div class="dancers-7"></div>
<div class="dancers-8"></div>
<div class="dancers-9"></div>
<div class="dancers-10"></div>

.dancers-1 {
  width: 40px;
  height: 40px;
  position: relative;
}
.dancers-1:before,
.dancers-1:after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  margin:-8px 0 0 -8px;
  width:16px;
  height:16px;
  background:#3FB8AF;
  animation:
    da1-1 2s  infinite,
    da1-2 .5s infinite;
}
.dancers-1:after {
  background:#FF3D7F;
  animation-delay: -1s,0s;
}

@keyframes da1-1 {
  0%   {top:0   ;left:0}
  25%  {top:100%;left:0}
  50%  {top:100%;left:100%}
  75%  {top:0   ;left:100%}
  100% {top:0   ;left:0}
}
@keyframes da1-2 {
   80%,100% {transform: rotate(0.5turn)}
}

.dancers-2 {
  width: 40px;
  height: 40px;
  position: relative;
}
.dancers-2:before,
.dancers-2:after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  margin:-8px 0 0 -8px;
  width:16px;
  height:16px;
  background:#3FB8AF;
  animation:
    da2-1 2s  infinite,
    da2-2 1s infinite ;
}
.dancers-2:after {
  background:#FF3D7F;
  animation-delay: -1s,0s;
}

@keyframes da2-1 {
  0%   {top:0   ;left:0}
  25%  {top:100%;left:0}
  50%  {top:100%;left:100%}
  75%  {top:0   ;left:100%}
  100% {top:0   ;left:0}
}
@keyframes da2-2 {
   40%,50% {transform: rotate(0.25turn) scale(0.5)}
   100%    {transform: rotate(0.5turn) scale(1)}
}

.dancers-3 {
  width: 60px;
  height: 16px;
  display: flex;
  justify-content: space-between;
  animation:da3-0 2s infinite alternate;
}
.dancers-3:before,
.dancers-3:after {
  content: "";
  width:16px;
  background:#3FB8AF;
  animation:da3-1 1s infinite alternate;
}
.dancers-3:after {
  background:#FF3D7F;
  --s:-1;
}

@keyframes da3-0 {
   0%,40%   {transform: rotate(0)}
   80%,100% {transform: rotate(.5turn)}
}

@keyframes da3-1 {
   80%,100% {transform: translate(calc(var(--s,1)*14px))}
}
   
.dancers-4 {
  width: 16px;
  height: 16px;
  background:#3FB8AF;
  box-shadow: 30px 0 #FF3D7F;
  animation:
    da4-1  1s infinite alternate,
    da4-2 .5s infinite alternate;
}

@keyframes da4-1 {
   0%,40%   {transform: rotate(0)}
   80%,100% {transform: rotate(.5turn)}
}

@keyframes da4-2 {
   80%,100% {box-shadow: 16px 0 #FF3D7F}
}

.dancers-5 {
  width: 16px;
  height: 16px;
  background:#3FB8AF;
  position: relative;
  animation:da5-0  2s infinite linear;
}
.dancers-5:before {
  content: "";
  position: absolute;
  inset:0;
  background: #FF3D7F;
  transform: translate(30px) rotate(0);
  animation:da5-1 .5s infinite 
}

@keyframes da5-0 {
   100% {transform: rotate(1turn)}
}

@keyframes da5-1 {
   100% {transform: translate(30px) rotate(.25turn)}
}

.dancers-6 {
  width: 16px;
  height: 16px;
  background:#3FB8AF;
  box-shadow:0 -16px #FF3D7F;
  animation:da6 2s infinite;
}

@keyframes da6 {
   0%   {transform: translate(0   ,0    ) rotate(0)}
   25%  {transform: translate(0   ,0    ) rotate(90deg)}
   50%  {transform: translate(100%,-100%) rotate(180deg)}
   75%  {transform: translate(100%,-100%) rotate(270deg)}
   100% {transform: translate(0   ,0    ) rotate(360deg)}
}


.dancers-7 {
  width: 18px;
  height: 18px;
  background:#3FB8AF;
  animation:
    da7-1 1s infinite alternate,
    da7-2 2s infinite alternate;
}

@keyframes da7-1 {
   0%,10%{transform:scale(1) rotate(0)}
   100%  {transform:scale(0) rotate(1turn)}
}

@keyframes da7-2 {
   0%,49.99% {background:#3FB8AF}
   50%,100%  {background:#FF3D7F}
}

.dancers-8 {
  width: 16px;
  height: 16px;
  background:#3FB8AF;
  position: relative;
  animation:da8-0 2.5s infinite linear alternate;
}
.dancers-8:before {
  content: "";
  position: absolute;
  inset:0;
  background: #FF3D7F;
  transform: translate(100%);
  transform-origin: top left;
  animation:da8-1 .5s infinite alternate;
}

@keyframes da8-0 {
  0% ,19.9%,
  80%,100%  {transform: scale(1,1)}
  20%,39.9% {transform: scale(-1,1)}
  40%,59.9% {transform: scale(-1,-1)}
  60%,79.9% {transform: scale(1,-1)}
}

@keyframes da8-1 {
   0%,20%   {transform: translate(100%) rotate(0)}
   80%,100% {transform: translate(100%) rotate(-180deg)}
}

.dancers-9 {
  width: 32px;
  height: 16px;
  display: flex;
  animation:da9-0 1s infinite;
}
.dancers-9:before,
.dancers-9:after {
  content: "";
  flex:1;
  background:#3FB8AF;
  transform-origin: top right;
  animation:da9-1 1s infinite;
}
.dancers-9:after {
  background:#FF3D7F;
  transform-origin: top left;
  --s:-1;
}

@keyframes da9-0 {
   100% {transform: translateY(100%)}
}

@keyframes da9-1 {
   100% {transform: rotate(calc(var(--s,1)*90deg))}
}


.dancers-10 {
  width: 32px;
  height: 16px;
  display: flex;
}
.dancers-10:before,
.dancers-10:after {
  content: "";
  flex:1;
  background:#3FB8AF;
  transform-origin: top right;
  animation:da10-1 2s infinite;
}
.dancers-10:after {
  background:#FF3D7F;
  transform-origin: top left;
  animation-delay: .25s;
}


@keyframes da10-1 {
   0%,5%    {transform: rotate(0)}
   20%,30%  {transform: rotate(90deg)}
   45%,55%  {transform: rotate(180deg)}
   70%,80%  {transform: rotate(270deg)}
   95%,100% {transform: rotate(360deg)}
}

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

* {
  box-sizing: border-box;
}