JIT
Grid - Untitled
Log in
@andronov04
bouncing animation
Gemini 2.5 Pro
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bouncing Animation</title> <style> :root { --ball-size: 70px; --bounce-height: 300px; --animation-duration: 1.4s; --ball-color: #4A90E2; --shadow-color: rgba(0, 0, 0, 0.15); --background-color: #f0f4f8; } 
    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--background-color);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    .stage {
        width: 200px;
        height: calc(var(--bounce-height) + var(--ball-size));
        position: relative;
        /* The perspective and transform-style are for potential 3D effects,
           though not strictly necessary for this 2D bounce. */
        perspective: 1000px;
        transform-style: preserve-3d;
    }

    .ball {
        width: var(--ball-size);
        height: var(--ball-size);
        background: radial-gradient(circle at 30% 30%, #87b7f3, var(--ball-color));
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: calc(50% - var(--ball-size) / 2);
        /* A cubic-bezier that simulates gravity: fast drop, slow rise */
        animation: bounce var(--animation-duration) cubic-bezier(0.5, 0.05, 1, 0.5) infinite;
    }

    .shadow {
        width: calc(var(--ball-size) * 1.1);
        height: calc(var(--ball-size) * 0.2);
        background-color: var(--shadow-color);
        border-radius: 50%;
        position: absolute;
        bottom: -10px;
        left: calc(50% - (var(--ball-size) * 1.1) / 2);
        filter: blur(4px);
        animation: shadow var(--animation-duration) cubic-bezier(0.5, 0.05, 1, 0.5) infinite;
    }

    @keyframes bounce {
        0%, 100% {
            /* Top of the bounce */
            transform: translateY(0);
        }
        50% {
            /* Bottom of the bounce */
            transform: translateY(var(--bounce-height));
        }
    }

    @keyframes shadow {
        0%, 100% {
            /* Shadow is small and light when ball is high */
            transform: scale(0.6);
            opacity: 0.7;
        }
        50% {
            /* Shadow is large and dark when ball is low */
            transform: scale(1);
            opacity: 1;
        }
    }
</style>
</head> <body> <div class="stage"> <div class="ball"></div> <div class="shadow"></div> </div> </body> </html>*
Updated files
v1