flow state

Open In Editor Publish Your Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

/* Animações --------------------------------------------- */
.snippet {
  position: relative;
  width: 80px;
  height: 30px;
  background-color: #1f2937;
  border: 2px solid rgba(255, 255, 255, 0.3);
  animation: flow 3s ease infinite alternate; /* Animação de base */
}

/*  @keyframes cria a animação individual */
@keyframes flow {
  0% {
    transform: translateX(0) rotate(0deg); /*  Posicionamento inicial */
    opacity: 1;
  }
  50% {
    transform: translateX(10px) rotate(180deg); /*  Posicionamento e rotação */
    opacity: 0.5; 
  }
  100% {
    transform: translateX(0) rotate(360deg); /*  Volta ao início */
    opacity: 1;
  } 
}

/* Visual */

.snippet:nth-child(1) { animation-delay: 0s; }
.snippet:nth-child(2) { animation-delay: 0.2s; }
.snippet:nth-child(3) { animation-delay: 0.4s; }
.snippet:nth-child(4) { animation-delay: 0.6s; }
.snippet:nth-child(5) { animation-delay: 0.8s; }

flow state

Recommended

CSS Loading Animation: Memory Flow & Reflection

flower

HTML

CSS

JS

Recommended

CSS Loading Animation: Memory Flow & Reflection

flower

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS