Bouncing Ball Animation
How do I make an bouncing ball animation?
What is a bouncing ball animation? How do you make a bouncing ball animation? This script and codes were developed by Jack Rugile on 25 January 2023, Wednesday.
Bouncing Ball Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bouncing Ball Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap red"> <div class="shadow"></div> <div class="ball"></div>
</div>
<div class="wrap green"> <div class="shadow"></div> <div class="ball"></div>
</div>
<div class="wrap blue"> <div class="shadow"></div> <div class="ball"></div>
</div>
</body>
</html>
Bouncing Ball Animation - Script Codes CSS Codes
html,
body { height: 100%;
}
body { background: #fff; background: -webkit-radial-gradient(#fff, #ccc); background: radial-gradient(#fff, #ccc);
}
.wrap { bottom: 100px; margin-left: -50px; position: absolute; width: 100px;
}
.red { left: 25%; }
.green { left: 50%; }
.blue { left: 75%; }
.ball,
.shadow { border-radius: 100%; left: 0; margin: auto; position: absolute; right: 0; top: 0;
}
.ball { -webkit-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; height: 50px; width: 50px;
}
.red .ball { background: -webkit-linear-gradient(#e55, #b00); background: linear-gradient(#e55, #b00); }
.green .ball { background: -webkit-linear-gradient(#5d5, #0a0); background: linear-gradient(#5d5, #0a0); }
.blue .ball { background: -webkit-linear-gradient(#59e, #04b); background: linear-gradient(#59e, #04b); }
.shadow { -webkit-animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; background: #000; bottom: -90px; height: 25px; width: 75px;
}
.red .ball,
.red .shadow { -webkit-animation-delay: -200ms; animation-delay: -200ms; }
.green .ball,
.green .shadow { -webkit-animation-delay: -100ms; animation-delay: -100ms; }
.blue .ball ,
.blue .shadow { -webkit-animation-delay: 0; animation-delay: 0; }
@-webkit-keyframes ball { 0% { -webkit-transform: translateY( 0 ); transform: translateY( 0 ); } 100% { -webkit-transform: translateY( -150px ); transform: translateY( -150px ); }
}
@keyframes ball { 0% { -webkit-transform: translateY( 0 ); transform: translateY( 0 ); } 100% { -webkit-transform: translateY( -150px ); transform: translateY( -150px ); }
}
@-webkit-keyframes shadow { 0% { opacity: 0.2; -webkit-transform: scale( 0.75 ); transform: scale( 0.75 ); } 100% { opacity: 0.05; -webkit-transform: scale( 1 ); transform: scale( 1 ); }
}
@keyframes shadow { 0% { opacity: 0.2; -webkit-transform: scale( 0.75 ); transform: scale( 0.75 ); } 100% { opacity: 0.05; -webkit-transform: scale( 1 ); transform: scale( 1 ); }
}
Developer | Jack Rugile |
Username | jackrugile |
Uploaded | January 25, 2023 |
Rating | 4.5 |
Size | 1,952 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS3 Pseudo Sound Bars | 2,400 Kb |
Organic Circle Canvas Loader | 2,428 Kb |
Bubble Sketch.js Test | 3,437 Kb |
Rainbow Loader | 2,022 Kb |
Glowing Pulse Form | 2,542 Kb |
Canvas Simple Circle Loader | 2,946 Kb |
Canvas Parallax Skyline | 4,871 Kb |
Canvas Wave | 2,902 Kb |
Canvas Color Smoke | 3,446 Kb |
Canvas Radar | 3,074 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Basic template | Tomcat | 1,675 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Base-Style | Daniel_gooss | 2,614 Kb |
Nice textured background | Hans | 2,659 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!