Bucle en Vanilla CSS

En este artículo te explicaré cómo hacer un bucle con Vanilla CSS, sin necesidad de preprocesadores CSS

Hoy en día, se puede hacer casi cualquier cosa con CSS, y los bucles no iban a ser menos.

Para hacer un blucle usaremos las propiedades counter-reset y counter-increment.

¿Qué vamos a hacer?

Vamos a dibujar unas cajas y le vamos a aplicar una animación. Le vamos a asignar a cada caja el número del item del contador desde CSS.

Para aplicar distintos retardos a las animaciones lo haré con el ngStyle de Angular, ya que hoy por hoy, la función calc de CSS no admite la función counter.

El código

HTML

  <div class="box-container">
    <div class="box box1" [ngStyle] = "{ 'animation-delay' :  (0.5) + 's'}"></div>
    <div class="box box2" [ngStyle] = "{ 'animation-delay' :  (1) + 's'}"></div>
    <div class="box box3" [ngStyle] = "{ 'animation-delay' :  (1.5) + 's'}"></div>
  </div>

CSS

  .box-container {
    display: flex;
    counter-reset: _item;
  }
  .box{
    margin: 0.5rem;
    width: 4rem;
    height: 4rem;
    background-color: indigo;
    color:white;
    display: flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    
    counter-increment:_item;
    animation: scale-in-center infinite; 
    animation-duration: 2s;
  }

  .box::after{
    content: counter(_item);
  }

  @keyframes scale-in-center {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

Hasta luego 🖖

¿Te gusta mi contenido? Apóyame