Bouncing Ball
Home
Snippets
Bouncing Ball
HTML
CSS
JS
<div class="ball"></div>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #000000; overflow: hidden; } .ball { width: 50px; height: 50px; background-color: #ff6347; border-radius: 50%; position: relative; animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { top: 0; animation-timing-function: ease-in; } 50% { top: 120px; animation-timing-function: ease-out; } }
//javascript
Ad #1
Ad #2
Scroll to Top