Bouncing Ball

December 11, 2014

Goals: Explore CSS animations properties and use keyframes to animate a...bouncing, color-changing ball!!

Source: Demosthenes.info


The code

Prefixes omitted, for brevity

#ball {
    border-radius: 50%;
    width: 20vw; height: 20vw;
    margin: 0 auto 300px auto;
    transform-origin: center-bottom;
    animation: bounce 1.3s cubic-bezier(.30,2.40,.85,2.50) infinite;
}

@keyframes bounce {
    from, to {
        transform: translateY(10vh) scaleY(.98);
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%,#354CEF,#000);
    }
    10% {
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%,#596CF2,#000);
    }
    20% {
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%,#7E8DF9,#000);
    }
    30% {
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%,#9BA6F7,#000);
    }
    40% {
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%,#B2BBF9,#000);
    }
    50% {
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%,#BEC6FA,#000); 
    }
    60% {
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%,#C9CFFA,#000);
    }
    70% {
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%,#D7DCFD,#000);
    }
    80% {
        background-image: radial-gradient(ellipse farthest-corner at 25% 25%,#E2E6FD,#000);
        transform: translateY(15vh) scaleY(1.02) scaleX(1.02);
    }
}