I needed to make a simple animation for a side-project. I originally started off wanting to either make a bouncing ball or have two balls cross over beneath the title post. I decided to go with the latter and I didn’t want to use JavaScript for this, just pure CSS.

The codepen for this project can be found here.

There were three main steps:

1. Make a ball
2. Give the ball a shadow
3. Put the ball inside a container 
4. Make the ball move back and forth at a certain speed
5. Repeat the above with a second ball

Some key CSS features that came in handy to make the ball were the following properties:

display: block // to get you started with making a circle
border-radius: 50% // to make it into a circle
box-shadow: inset -5px -5px 5px rgba(0,0,0,.6) 

I used keyframes to get the two balls to move in a horizontal direction along a ‘X’ axis. The container had a width of 500px and the balls needed to move from point A to point B which were both equidistant from the centre. So I went with point A = 200px and point B = 300px. In my actual project I modified it so that it would line up correctly with the content above. The function I used for this (for Firefox):

@-moz-keyframes moveX {
  from { left: 200px; } to { left: 300px; }
}

And for the animation (for Firefox):

-moz-animation: moveX 1.5s linear 0s infinite alternate;

The ‘alternate’ property is important to make the ball move smoothly from point A - B - A otherwise it makes for a patchy movement pattern where the ball reappears at point A without moving across from B - A.