CSS Grid Animation Example

Open In Editor Publish Your Code

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #181A23;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }
    .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;
    }

.cell {
      position: relative;
      width: 10vw;
      height: 10vh;
      background: #F8F8F2;
      border-radius: 10px;
      opacity: 0.7;
      transform-style: preserve-3d;
      animation: dream-weave 15s linear infinite alternate;  
    }

.cell.cell1 {
      background: #66D9EF; /* azul */
  }   .cell.cell2 {
      background: #AE81FF; /* roxo */
    }   .cell.cell3 {
      background: #E6DB74; /* amarelo */
    }   .cell.cell4 {
      background: #A6E22E; /* verde */
    }   .cell.cell5 {
      background: #F92672; /* vermelho */
    }

.code {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: #F8F8F2;
      animation: code-pulse 3s linear infinite alternate;
    }

@keyframes dream-weave {
      0% {
        transform: rotateY(0deg) translateZ(0px);
      }
      50% {
        transform: rotateY(180deg) translateZ(-20px);
      }
      100% {
        transform: rotateY(360deg) translateZ(0px);
      }
    }

@keyframes code-pulse {
      0%, 100% {
        opacity: 0.8;
      }
      50% {
        opacity: 1;
      }
    }

CSS Grid Animation Example

Recommended

CSS Loading Animation HTML Snippet

CSS Office Layout Structure

CSS Stage with Light Strings and Stairs

HTML

CSS

JS

Recommended

CSS Loading Animation HTML Snippet

CSS Office Layout Structure

CSS Stage with Light Strings and Stairs

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS