CSS Shapes Animation Example

Open In Editor Publish Your Code

body {
        background-color: #1C1E23;
        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%;
        max-width: 90%;
        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;
    }

.container {           
        position: relative;
        width: 200px;
        height: 200px;
    }

.shape {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #FFC000;  
        border-radius: 50%; 
        opacity: 1; 
        animation: shapeAnimation 5s infinite alternate linear;
    }

.shape::before {
            content: '';
            position: absolute;  
            width: 100%; 
            height: 100%;
            background-color: rgba(0, 0, 0, 0); 
            border-radius: 50%;
            transform: translate(-50%, -50%); 
            animation: outlineAnimation 5s infinite alternate linear;

}

@keyframes shapeAnimation {
        0% {
            transform: scale(1)
        }

50% {
            transform: scale(1.1)
            animation-delay: 1s;
        }
        100% {
            transform: scale(0.8)
        }   
    }  
    @keyframes outlineAnimation {
        0%
        {
            transform : rotate(0deg); 
            opacity: 0;

}

50% 
        {
            transform : rotate(-45deg);
            opacity: 1;
        
        }
        100%
        {
            transform : rotate(45deg); 
            opacity: 0;

} 
    }

CSS Shapes Animation Example

Recommended

CSS Loading Animation HTML Structure

3D Login Signup Box HTML CSS Design

CSS Search Bar

HTML

CSS

JS

Recommended

CSS Loading Animation HTML Structure

3D Login Signup Box HTML CSS Design

CSS Search Bar

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS