<div class="colorful-1"></div>
<div class="colorful-2"></div>
<div class="colorful-3"></div>
<div class="colorful-4"></div>
<div class="colorful-5"></div>
<div class="colorful-6"></div>
<div class="colorful-7"></div>
<div class="colorful-8"></div>
<div class="colorful-9"></div>
<div class="colorful-10"></div>
.colorful-1 {
  width: 40px;
  height: 40px;
  background:
    linear-gradient(#00AAFF 0 0),
    linear-gradient(#FF00AA 0 0),
    #00AAFF;
  background-repeat: no-repeat;
  animation:co1 1.5s infinite; 
}

@keyframes co1 {
  0%   {background-size:100%    0,0    100%}
  30%,
  50%  {background-size:100%    0,100% 100%}
  80%,
  100% {background-size:100% 100%,100% 100%}
}


.colorful-2 {
  width: 40px;
  height: 40px;
  background:
    linear-gradient( 45deg,#0000 50%,#00AAFF 0),
    linear-gradient(-45deg,#0000 50%,#FF00AA 0),
    #00AAFF;
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation:co2 1.5s infinite; 
}

@keyframes co2 {
  0%   {background-position: bottom left,bottom right}
  30%,
  50%  {background-position: bottom left,top left}
  80%,
  100% {background-position: top right  ,top left}
}

.colorful-3 {
  width: 40px;
  height: 40px;
  background:
    linear-gradient( 45deg,#00AAFF 50%,#0000 0),
    linear-gradient(-45deg,#F1BBBB 50%,#0000 0),
    linear-gradient( 45deg,#0000 50%,#AA00FF 0),
    linear-gradient(-45deg,#0000 50%,#FF00AA 0),
    #00AAFF;
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation:co3 2.5s infinite; 
}

@keyframes co3 {
  0%   {background-position:100% 0,0    0   ,0 100%,100% 100%}
  15%,
  25%  {background-position:100% 0,0    0   ,0 100%,0    0   }
  40%,
  50%  {background-position:100% 0,0    0   ,100% 0,0    0   }
  65%,
  75%  {background-position:100% 0,100% 100%,100% 0,0    0   }
  90%,
  100% {background-position:0 100%,100% 100%,100% 0,0    0   }
}

.colorful-4 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side,#ED303C 94%,#0000 ),
    radial-gradient(farthest-side,#FF9C5B 94%,#0000 ),
    #ED303C;
  background-position: center;
  background-repeat: no-repeat;
  animation:co4 1.5s infinite; 
}

@keyframes co4 {
  0%   {background-size:0    0   ,0    0}
  30%,
  50%  {background-size:0    0   ,120% 120%}
  80%,
  100% {background-size:120% 120%,120% 120%}
}

.colorful-5 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side,#ED303C 94%,#0000),
    radial-gradient(farthest-side,#3B8183 94%,#0000),
    radial-gradient(farthest-side,#FAD089 94%,#0000),
    radial-gradient(farthest-side,#FF9C5B 94%,#0000),
    #ED303C;
  background-size:105% 105%;
  background-repeat: no-repeat;
  animation:co5 2s infinite; 
}

@keyframes co5 {
  0%  {background-position: 50% -50px,-40px 50%, 50% calc(100% + 50px),calc(100% + 50px) 50%}
  20%,
  25% {background-position: 50% -50px,-50px 50%, 50% calc(100% + 50px),50% 50%}
  45%,
  50% {background-position: 50% -50px,-50px 50%, 50% 50%              ,50% 50%}
  75%,
  75% {background-position: 50% -50px, 50%  50%, 50% 50%              ,50% 50%}
  95%,
  100%{background-position: 50%  50% , 50%  50%, 50% 50%              ,50% 50%}
}


.colorful-6 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    linear-gradient(#ED303C 0 0),
    linear-gradient(#ED303C 0 0),
    linear-gradient(#3B8183 0 0),
    linear-gradient(#3B8183 0 0),
    linear-gradient(#FAD089 0 0),
    linear-gradient(#FAD089 0 0),
    linear-gradient(#FF9C5B 0 0),
    linear-gradient(#FF9C5B 0 0),
    #ED303C;
  background-position:top left,bottom right;
  background-repeat: no-repeat;
  animation:co6 2.5s infinite; 
}

@keyframes co6 {
  0%   {background-size: 0   100%,0   100%,100% 0  ,100% 0  ,0   100%,0   100%,100% 0  ,100% 0  }
  20%,
  25%  {background-size: 0   100%,0   100%,100% 0  ,100% 0  ,0   100%,0   100%,100% 50%,100% 50%}
  45%,
  50%  {background-size: 0   100%,0   100%,100% 0  ,100% 0  ,50% 100%,50% 100%,100% 50%,100% 50%}
  70%,
  75%  {background-size: 0   100%,0   100%,100% 50%,100% 50%,50% 100%,50% 100%,100% 50%,100% 50%}
  95%,
  100% {background-size: 50% 100%,50% 100%,100% 50%,100% 50%,50% 100%,50% 100%,100% 50%,100% 50%}
}

.colorful-7 {
  width: 50px;
  height: calc(50px*0.866);
  clip-path: polygon(50% 0,100% 100%,0 100%);
  display: grid;
  background:#3A89C9;
}
.colorful-7::before,
.colorful-7::after {
  content: "";
  grid-area: 1/1;
  background:inherit;
  clip-path: inherit;
  transform-origin: 50% 66%;
  animation:co7-1 2s infinite; 
}
.colorful-7::before {
  background:#9CC4E4;
  animation:co7-2 2s infinite 1s; 
}

@keyframes co7-1 {
  0% ,99.9% {transform:scale(1)}
  50%,99%   {transform:scale(0)}
}

@keyframes co7-2 {
  0%,51%{transform:scale(1)}
  50%   {transform:scale(0)}
}


.colorful-8 {
  width: 50px;
  height: calc(50px*0.866);
  clip-path: polygon(50% 0,100% 100%,0 100%);
  display: grid;
  background:
    conic-gradient(from 0deg   at 50% 60%,#3A89C9 120deg,#0000 0),
    conic-gradient(from 120deg at 50% 60%,#3A89C9 120deg,#0000 0),
    conic-gradient(from 240deg at 50% 60%,#3A89C9 120deg,#0000 0),
    conic-gradient(from 0deg   at 50% 60%,#9CC4E4 120deg,#0000 0),
    conic-gradient(from 120deg at 50% 60%,#9CC4E4 120deg,#0000 0),
    conic-gradient(from 240deg at 50% 60%,#9CC4E4 120deg,#0000 0),
    #3A89C9;
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation:co8 1.5s infinite;
}

@keyframes co8 {
  0%   {background-position: left,top,right}
  30%,
  50%  {background-position: left,top,right,center,center,center}
  80%,
  100% {background-position: center}
}

.colorful-9 {
  width: 50px;
  height: calc(50px*0.866);
  clip-path: polygon(50% 0,100% 100%,0 100%);
  position: relative;
}
.colorful-9::before{
  content: "";
  position: absolute;
  inset:-150% -100% -50%;
  background:repeating-conic-gradient(from 30deg,#FFABAB 0 60deg,#ABE4FF 0 120deg,#FF7373 0 180deg);
  animation:co9 2s infinite; 
}
@keyframes co9 {
  0%   {transform: rotate(0)}
  23%,
  33%  {transform: rotate(60deg)}
  56%,
  66%  {transform: rotate(120deg)}
  90%,
  100% {transform: rotate(180deg)}
}


.colorful-10 {
  width: 80px;
  height: 40px;
  --c:linear-gradient(#FFD412 25%,#ABD406 0 50%,#FF821C 0 75%,#FFD412 0);
  background:var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 400%;
  background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%;
  background-repeat: no-repeat;
  animation:co10 2s infinite; 
}

@keyframes co10 {
  0%     {background-position: calc(0*100%/3) calc(3*100%/3),calc(1*100%/3) calc(3*100%/3),calc(2*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3)}
  8.33%  {background-position: calc(0*100%/3) calc(2*100%/3),calc(1*100%/3) calc(3*100%/3),calc(2*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3)}
  16.67% {background-position: calc(0*100%/3) calc(2*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3)}
  25%    {background-position: calc(0*100%/3) calc(2*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(2*100%/3),calc(3*100%/3) calc(3*100%/3)}
  30%,
  33.33% {background-position: calc(0*100%/3) calc(2*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(2*100%/3),calc(3*100%/3) calc(2*100%/3)}
  41.67% {background-position: calc(0*100%/3) calc(1*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(2*100%/3),calc(3*100%/3) calc(2*100%/3)}
  50%    {background-position: calc(0*100%/3) calc(1*100%/3),calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(2*100%/3),calc(3*100%/3) calc(2*100%/3)}
  58.33% {background-position: calc(0*100%/3) calc(1*100%/3),calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(1*100%/3),calc(3*100%/3) calc(2*100%/3)}
  63%,
  66.67% {background-position: calc(0*100%/3) calc(1*100%/3),calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(1*100%/3),calc(3*100%/3) calc(1*100%/3)}
  75%    {background-position: calc(0*100%/3) calc(0*100%/3),calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(1*100%/3),calc(3*100%/3) calc(1*100%/3)}
  83.33% {background-position: calc(0*100%/3) calc(0*100%/3),calc(1*100%/3) calc(0*100%/3),calc(2*100%/3) calc(1*100%/3),calc(3*100%/3) calc(1*100%/3)}
  91.67% {background-position: calc(0*100%/3) calc(0*100%/3),calc(1*100%/3) calc(0*100%/3),calc(2*100%/3) calc(0*100%/3),calc(3*100%/3) calc(1*100%/3)}
  97%,
  100%   {background-position: calc(0*100%/3) calc(0*100%/3),calc(1*100%/3) calc(0*100%/3),calc(2*100%/3) calc(0*100%/3),calc(3*100%/3) calc(0*100%/3)}
}

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

* {
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.