CSS Animation Pong

Warning This article was written over six months ago, and may contain outdated information.

The recent release of the Safari 4 Beta saw a new standards proposal from the Webkit team, for controlling animation using CSS. While there’s still a debate to be had about whether CSS is the right language for this (I still fall on the side that it doesn’t, strictly), I do think their implementation is well handled. I wanted to try it out, so I went back to the earliest form of digital entertainment: Pong!

In order to see the animation below you’ll need a recent version of Webkit (for example Safari 4, Chrome developer build, or Midori (if you’re using Linux)). Once you have one of those browsers, pass your mouse over the Pong screen:

This uses three very simple animations (called left, right & ball), moving the paddles up and down and the ball left and right. The right paddle uses an extra keyframe halfway through to slow the movement down a little:

@-webkit-keyframes left {
from { top: 20px; }
to { top: 150px; } 
}

@-webkit-keyframes ball {
from { left: 40px; top: 60px; }
to { left: 340px; top: 150px; }
}

@-webkit-keyframes right {
from { bottom: 120px; }
50% { bottom: 60px; }
to { bottom: 40px; } 
}

Then the :hover state calls the animation and sets the speed and transition:

#court:hover div {
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}

#court:hover #paddle-left { -webkit-animation-name: left;  }
#court:hover #ball { -webkit-animation-name: ball; }
#court:hover #paddle-right { -webkit-animation-name: right; }

Although I’m struggling at the moment to see real practical uses, this is barely scratching the surface of what the standard is capable of and I look forward to seeing what more creative minds than mine can come up with.

Update: Em português.

3 comments on
“CSS Animation Pong”

  1. This is extremely impressive. I really like the idea of animation within css, but at the moment it is a dream. It is taking years to get css3 up and running and it would take even longer.

  2. This also works in the latest Google Chrome (Dev Channel)

  3. @Jonny: Maybe a dream to have animations in IE, but it’s already here in Safari & Chrome, and Firefox have implemented some of Webkit’s other suggestions so this may not be out of the question for them.

    @Navarr: Thanks for that information; I’ve updated the post to reflect that.