Ever imagine that you can now easily create a bouncing ball using CSS3 only? No javascript or image is required to do this. Thanks to the powerful attribute of CSS3 animation.
To create a ball rounded effect, we will use css3 border radius to do so. By setting the value to 50%, it will create a rounded div ball. Please see the following css3 style code.
<style> .bounce-ball{ border-radius: 50%; width:80px; height:80px; background: #a4b357; background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); background: -webkit-linear-gradient(top, #a4b357 0%,#75890c 100%); background: linear-gradient(to bottom, #a4b357 0%,#75890c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); color:#fff; line-height: 80px; text-align: center; position:absolute; right:10px; bottom:10px; -webkit-animation-name: bounceballAnimation; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-delay: 0; -webkit-animation-timing-function: ease-out; animation-name: bounceballAnimation; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: 0; timing-function: ease-out; animation-play-state: running; animation-fill-mode: none; } .bounce-ball:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes bounceballAnimation { from { bottom: 0; height: 65px; } 10% { bottom: 0; height: 80px; } to { bottom: 10%; } } @keyframes bounceballAnimation { from { bottom: 0; height: 65px; } 10% { bottom: 0; height: 80px; } to { bottom: 10%; } } </style>
Demo of Bouncing Ball
You can see the bouncing ball on the right bottom corner of the comment form.
Hi!!