CSS Animation: Bureaucracy Figure Movement

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: 25%;
            min-width: 100%;
            width: 100%;
            overflow-y: auto;
            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;
        }
        
        .bureaucracy {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #34495E;
            border-radius: 10px;
            transform-origin: center;
            animation: bureaucracy 10s linear infinite;
        }

.figure {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #66D9EF;
            border-radius: 50%;
            filter: blur(5px) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
            animation: figureLoop 8s linear infinite;
        }

@keyframes bureaucracy {
            0% {
                transform: rotate(0deg); 
            } 
            50% {
                transform: rotate(180deg); 
            } 
            100% {
                transform: rotate(360deg); 
            }
        }
        
        @keyframes figureLoop {
          0% { transform: translate(0,0); }
          50% { transform: translate(50px, 0); }
          100% { transform: translate(0,0); } /* loop back */
        }

/* Animação que se repete em cada iteração da loop do 'figureLoop */
         .figure:nth-child(1) { animation-delay: 0s; }
         .figure:nth-child(2) { animation-delay: 2s; }
         .figure:nth-child(3) { animation-delay: 4s; }

CSS Animation: Bureaucracy Figure Movement

Recommended

HTML CSS Developer Portfolio Website Template

SEAT Leon Login Page HTML CSS Template

CSS Radio Button Navigation Menu

HTML

CSS

JS

Recommended

HTML CSS Developer Portfolio Website Template

SEAT Leon Login Page HTML CSS Template

CSS Radio Button Navigation Menu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS