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

Geometry Dash Game Clone HTML CSS JavaScript

Link Text Animation

CSS Free Button Animation

HTML

CSS

JS

Recommended

Geometry Dash Game Clone HTML CSS JavaScript

Link Text Animation

CSS Free Button Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS