Thursday, July 21, 2011

Key Frames Are Cool

Open Prize BallWe are planning to give away new discs (that players can collect) when games are won in Thwack!! (You can't get prizes just yet, so don't be too disappointed if you beat the skill shots and receive nothing.)

Todd thought a prize ball would be an exciting way to deliver these prizes. We could use canvas to do this, but today, just for fun, I decided to experiment with CSS key frames and use the DOM instead.

I had read about these on several occasions, but haven't tried them yet. It was much simpler to implement than similar code I could conjure up in JavaScript to do the same thing (example is for webkit browsers):

@-webkit-keyframes ballroll {
  from {left: -25%; -webkit-transform:rotate(-1440deg);}
  50% {left: 125%; -webkit-transform:rotate(0deg);}
  to {left: -25%; -webkit-transform:rotate(-1440deg);}

.prize-ball-roll {
  position: absolute;
  height: 75px;
  width: 75px;
  bottom: 0px;
  left: -25%;
  z-index: 20;
  -webkit-animation: ballroll 4s ease-in-out infinite;

If you are viewing this post in a browser that supports key frames, you should see a prize ball rolling across the blog. How cool is that!?!


  1. I like it. I've been messing with keyframes. They can do a lot of cool stuff and it seems easy.

  2. Can someone tell me if the charges of $1.99 for the add't maps are per month charge, or a one time fee.

  3. @Kimster The charges for the maps are a one time fee.

  4. Additional obstacles in Sakura Grove are excellent! This adds a whole new layer of difficulty. Changes like that are pleasant surprises. Thank you.


Please keep the conversation healthy and wholesome.