html css animation transform translate3d

How do I constraint an animation using only CSS and HTML?

For a school project, I'm doing a Pong game following this tutorial: http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/

I'm stuck at the animation part. The ball isn't centred, and when I put @keyframes updown, it makes the ball bounce up and down over the court, when I want it constraint inside the court (walls).

See a picture here

How do I make the ball stay inside the box?

Here's my HTML:

<!doctype html>
<meta charset="UTF-8">
<title>Pong (1972)</title>
<link href="styles/csspong.css" rel="stylesheet">

<h1>CSS PONG</h1>
<div id="court">
    <div id="horizontal">
    <span id="ball"></span>
    </div>
</div>

CSS:

/*********************
    PLATFORM
********************/

#court{ 
    margin: 30px auto;
    width: 600px;
    height: 300px;
    position: relative;
    border: 4px dotted #3f3;
}

#court:before{
    left: 50%;
    content:'';
    width: 10px;
    height: 300px;
    position: absolute;
    border-left: 4px dashed #3f3;
    }

/*********************
        BALL
********************/

#ball{
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    background :#3f3;
    border-radius: 50%;
    transform: translate3d(10px,0,0)
}

/*********************
    BALL ANIMATION
********************/

@keyframes leftright {
0%,100% {transform: translate3d(10px,0,0)}
50% {transform: translate3d(570px,0,0)}
}
#ball{
 ...
 animation: leftright 2s infinite linear
 }

 @keyframes updown {
 0%,50%,100% {transform: translate3d(0,0,0)}
 25% {transform: translate3d(0,142px,0)}
 75% {transform: translate3d(0,-136px,0)} }

 #horizontal{
 ...
 animation: updown 2s infinite linear; }

Solution

First off, you need to remove the ... from your CSS (x2) in #ball and #horizontal.

Then you need to add to #ball top:142px, which is half the height of the box (150px) minus the total pixels of border (8px).

Here is my fiddle of it.

/*********************
PLATFORM
********************/

#court{ 
    margin: 30px auto;
    width: 600px;
    height: 300px;
    position: relative;
    border: 4px dotted #3f3;
}

#court:before{
    left: 50%;
    content:'';
    width: 10px;
    height: 300px;
    position: absolute;
    border-left: 4px dashed #3f3;
}

/*********************
    BALL
********************/

#ball{
    top:142px;
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    background :#3f3;
    border-radius: 50%;
    transform: translate3d(10px,0,0)
}

/*********************
BALL ANIMATION
********************/

@keyframes leftright {
    0%,100% {transform: translate3d(10px,0,0)}
    50% {transform: translate3d(570px,0,0)}
}
#ball{

     animation: leftright 2s infinite linear
 }

@keyframes updown {
    0%,50%,100% {transform: translate3d(0,0,0)}
    25% {transform: translate3d(0,142px,0)}
    75% {transform: translate3d(0,-136px,0)} }

#horizontal{
    animation: updown 2s infinite linear; 
}