style.css

.square {
  background: rgb(255,0,0));  
  width: 100px;
  height: 100px;
  transform: rotate(30deg);
  animation-duration: 3s;
  animation-name: cuadradoanimado;
  animation-iteration-count: infinite;
}
.BOOM{
  background: rgb(255,0,0));  
  width: 100px;
  height: 100px;
  transform: rotate(30deg);
  animation-duration: 3s;
  animation-name: cuadradoanimado;
  animation-iteration-count: infinite;
  
}
@keyframes cuadradoanimado {
from { background-color: red;}
to {background-color: white;}
}
.square1 {
  background: blue;  
  width: 100px;
  height: 100px;
  transform: rotate(30deg);
  animation-duration: 3s;
  animation-name: ;
  animation-iteration-count: infinite;
}

@keyframes cuadradoanimado1 {
from { background-color: blue;}
to {background-color: white;}
}

.kode {
  <weight>: 500

.kode-mono-<kode> {
  font-family: "Kode Mono", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;


@keyframe textoanimado
  .ml4 {
  position: relative;
  font-weight: 900;
  font-size: 4.5em;
}
.ml4 .letters {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0.3em;
  right: 0;
  opacity: 0; 
  display: flex;
  justify-content: center;
}