CSS Block Animation Structure

Open In Editor Video Publish Your Code

.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }

.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:transparent;
    
}

.container-block {
    position: relative;
    width: 200px;
    height: 200px;
    background: #fffff2;
    margin: 5px;
}
  
.block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); 
    opacity: 0;
    animation: appear .5s ease-in-out forwards 1s;
  }
.block:nth-child(1) {
    animation-delay: 0s; 
}
.block:nth-child(2) {
    animation-delay: 0.1s;
}
.block:nth-child(3) {
    animation-delay: 0.2s; 
}
.block:nth-child(4) {
    animation-delay: 0.3s; 
} 
.block:nth-child(5) {
    animation-delay: 0.4s; 
}
.block:nth-child(6) {
    animation-delay: 0.5s; 
}

/* Esse efeito visual simula a sensação de bloqueio criativo, os blocos aparecem de forma desorganizada e ficam "atravessando" um ao outro, criando a impressão de caos mental */

@keyframes appear {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0; 
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 0.8;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0; 
    }
}

CSS Block Animation Structure

Recommended

CSS Loading Animation Snippet

CSS Circle Animation HTML Snippet

CSS Pixel Animation Container

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

CSS Circle Animation HTML Snippet

CSS Pixel Animation Container

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS