![\"css-bouncing-ball-2\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2013\/01\/css-bouncing-ball-2.png\")
<\/p>\n<\/p>\n
Today we\u2019re going to create a ball that bounces infinitely around its container.<\/p>\n
I\u2019ll admit it: the idea for this tutorial was based on two things: first, those corny bouncing ball\/logo\/whatever screensaver animations that are so popular on modern televisions, DVD players, or just about anything else that has — or outputs to — a screen. Second, a brief but passionate love affair I had with Jezzball<\/a> in 2001.<\/p>\n So if bouncing balls are so old-school, what\u2019s the big whoop? We\u2019ll do ours entirely with CSS.<\/p>\n The HTML we need is pretty minimal: we need an element to be the ball, and we need a container for it to bounce around in. I\u2019m keeping things short and sweet here:<\/p>\n Like in my sphere tutorial<\/a>, I\u2019m using the good ol’ <b> tag for the ball.<\/p>\n There are three things we need to do here: style the box, style the ball, and animate the ball within the box. We\u2019ll take them in that order.<\/p>\n First up, we\u2019ll give our container some visual interest.<\/p>\n Some of these styles are arbitrary: you can give it any background-color, margin, box-shadow, border, and border-radius you wish. The rest are more important. Our box needs a defined width and height. You can define that in whatever units you want, but it\u2019d be a good idea to define the ball using the same units. And the relative position is critical, because that\u2019s what will allow the ball to move around in its container<\/a>. The hidden overflow is necessary to prevent any \u201cextras\u201d we add to the ball from showing up outside of the box.<\/p>\n Next, we\u2019ll style the ball:<\/p>\n The absolute positioning is the most critical bit here: that\u2019s what allows us to move the ball within its container. You\u2019ll also notice a lot of similarities to how we created the sphere<\/a> in the last tutorial. This is a slightly simplified version: I\u2019ve rounded its corners and used an inset box-shadow to create a 3D effect, but at this small size I didn\u2019t bother with any other tweaks. I did, however, add a second box-shadow, which you can see on this line:<\/p>\n Some CSS3 properties accept multiple values, separated with a comma, and box-shadow is one of them. The first box-shadow, before the comma, is our shading. The second is a faint shadow to the bottom-right of the ball, which further suggests a light source to the top-left. And by moving the shadow 15 pixels away from the ball, it also gives our box the illusion of depth.<\/p>\n After all that, we\u2019re left with something like this:<\/p>\n It\u2019s not much to look at without the animation, so let\u2019s move on.<\/p>\n To animate our ball, we\u2019re going to use CSS keyframes. Keyframes allow us to animate any number of CSS properties over time. We\u2019ll use two very simple keyframes to manage our mischief.<\/p>\n First, let\u2019s create a keyframe to move our ball along the x-axis:<\/p>\n As you can see, this is really just the same keyframe repeated for each of the major browsers. Keyframes are a newer addition to CSS, so we\u2019re stuck using vendor prefixes for the short term. <\/p>\n All this keyframe does is move our ball from<\/strong> the left side of the box to<\/strong> the right. Because \u2018left\u2019 positioning uses the left corner of the element to determine placement, our leftmost position is calculated as the width of the box, minus the width of the ball: 500px – 20px = 480px.<\/p>\n We can apply the animation to our ball by adding the following rules to the ball:<\/p>\n Again, we have one rule for each of the major browser prefixes. I\u2019m using animation shorthand here, so I\u2019ll walk through it. We\u2019re saying to animate the ball using the moveX<\/strong> keyframe rules, it should take 3 seconds<\/strong> to complete the animation, we want linear<\/strong> easing (that is, don\u2019t slow down (ease) at the ends of the animation), we want a 0 second<\/strong> starting delay, we want the animation to repeat infinitely<\/strong>, and we want it to alternate<\/strong> from front to back, instead of looping around to the beginning when it repeats.<\/p>\n Of course, that only gives us an animation along the x-axis. Now, we could easily just change the \u201ctop\u201d values in addition to the \u201cleft\u201d values in our existing keyframe. But there\u2019s a problem with that. If we define the both in the same spot, the ball will always bounce from the top-left corner, to the bottom-right, and back. If that\u2019s what you want or need, perfect. But I want some variety.<\/p>\n So instead, we\u2019ll create a second keyframe to control our movement on the y-axis:<\/p>\n This is basically the same as our moveX keyframes: we\u2019re moving the ball from the top of the box, to the bottom (minus the width of the ball). <\/p>\n And here\u2019s where it gets interesting. Elements can have more than one keyframe animation applied to them at the same time, separated with a comma, just like box-shadow. And more interestingly, each animation can have a different timing value! So let\u2019s change up our ball animation to look like this (I\u2019m only showing one for brevity):<\/p>\n moveX is still there, though I\u2019ve tweaked the animation to take 3.05 seconds to complete. Then, after a comma, we have our moveY animation, which takes 3.4 seconds to complete. <\/p>\n Why the different times? It means that the animations will finish their loops at slightly different points. This makes the ball appear to bounce randomly about the container, seemingly never hitting the same spot. It does, of course \u2013 after 207.4 seconds in this example, according to math \u2013 but you can modify that frequency by changing the number of seconds the animations take.<\/p>\n Here\u2019s the whole thing in action:<\/p>\nThe HTML<\/h3>\n
\n
<\/b><\/div>\n<\/pre>\nThe Box CSS<\/h3>\n
\n.box {\n background-color: #61ab20;\n margin: 0 auto;\n width: 500px;\n height: 300px;\n position: relative;\n box-shadow: inset 0 0 3px #000;\n border-radius: 5px;\n border: 1px solid #111;\n overflow: hidden;\n}<\/pre>\nThe Ball CSS<\/h3>\n
\n.box b {\n display: block;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #3673cf;\n box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);\n position: absolute;\n}<\/pre>\nbox-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);<\/pre>\n
![\"css-bouncing-ball-1\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2013\/01\/css-bouncing-ball-1.png\")
<\/p>\nThe Animation Keyframes<\/h3>\n
\n@-webkit-keyframes moveX {\n from { left: 0; } to { left: 480px; }\n}\n@-moz-keyframes moveX {\n from { left: 0; } to { left: 480px; }\n}\n@-o-keyframes moveX {\n from { left: 0; } to { left: 480px; }\n}\n@keyframes moveX {\n from { left: 0; } to { left: 480px; }\n}<\/pre>\n\n-webkit-animation: moveX 3s linear 0s infinite alternate;\n-moz-animation: moveX 3s linear 0s infinite alternate;\n-o-animation: moveX 3s linear 0s infinite alternate;\nanimation: moveX 3s linear 0s infinite alternate;<\/pre>\n
@-webkit-keyframes moveY {\n from { top: 0; } to { top: 280px; }\n}\n@-moz-keyframes moveY {\n from { top: 0; } to { top: 280px; }\n}\n@-o-keyframes moveY {\n from { top: 0; } to { top: 280px; }\n}\n@keyframes moveY {\n from { top: 0; } to { top: 280px; }\n}<\/pre>\nBring It All Together<\/h3>\n
animation: moveX 3.05s linear 0s infinite alternate, \nmoveY 3.4s linear 0s infinite alternate;<\/pre>\n
<\/code>Check out this Pen!<\/a><\/pre>\n