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

Question

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; }

Seems to work find in this Fiddle: http://jsfiddle.net/Bashere/5jq1yj50/ — Sterling Bourne, Nov 20 '15 at 19:41

alexwc_ · Accepted Answer · 2015-11-20T20:00:37.500

0

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; 
}

edited Nov 20 '15 at 20:00

answered Nov 20 '15 at 19:49

alexwc_

1,595
2
24
35

I'm guessing `...` refers to large blocks of CSS in his personal project that he considers not likely to be relevant to the issue. – Katana314 Nov 20 '15 at 19:58
no, @Katana314, there are actual instances of `...` in the OP's CSS that inhibits rules. – alexwc_ Nov 20 '15 at 19:59
I'm looking at the same code block you are, and I'm aware they were on the inside of some rules. My guess was that he uses a very large amount of CSS to draw the ball itself, especially if (random example) he draws a smiley face on it using background/border hacks or something. Since that would mean many CSS properties that don't affect the animation behavior, it would just mean extra reading. (Admittedly, this is just a guess) – Katana314 Nov 20 '15 at 20:03
ah, I see what you mean. Then hopefully the OP clarifies this. – alexwc_ Nov 20 '15 at 20:06
Ahhh, I see! Thank you so much leftside, it worked! And thank you @Kanata314 for your probable explanation. Working in Dreamweaver, the '...' did give me an error message, and if I didn't remove it, the animation wouldn't work. I'm still a noobie at this, so I had no idea why it was there in the first place, I thought it had to. Lol. – digitalsara Nov 20 '15 at 22:27
Good to hear it worked. Please accept my answer when you have a second. – alexwc_ Nov 20 '15 at 22:46

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

1 Answers1