css bouncing ball help needed

[furrball1383]

Hi well I’m quite proficient in css but I’m new to the whole css3 animations stuff and basically I want to make a ball that bounces onto the screen and keeps growing in size as it bounces till it comes to rest.

http://i54.tinypic.com/1zvww1j.png

the graphic basically shows how its going to go. I am basically going to have an image of a ball that is doing this and am going to have the image itself rotating as well. the thing I’m having a problem with is how to create the arc like motion of the ball between bounces. in just using transitions the movement of the ball is linear and so i can’t get my head around how to do this. I would like to do it using only css if possible, but if not then I guess I shall have to resort to using js with it as well. Anyway I was hoping one of you guys have already done something similar and so have an idea of how I could create this effect. Hope to hear from you guys soon!

[Billy]

Have you watched the screencast Chris has done about CSS3 animations?

[furrball1383]

yes actually i have, but after you mentioned it I did re-watch the video. I guess I could create the arcing motion by specifying the position on different key frames but seeing as there are going to be 3.5 arcs, that would be looking at a lot of key frames which in other words means a lot of code. I shall keep thinking about it and see what i can put together with that method, but in the mean time, if anyone comes up with a solution that requires less code do let me know!

[chrisburton]

I came across a website that has the animation you’re asking but I can’t remember what it was.

[furrball1383]

aww lol i found one where he simply bounces the ball from side to side, bu not in an arc. if you do remember the website, let me know. I shall hunt for it!

[furrball1383]

aww lol i found one where he simply bounces the ball from side to side, bu not in an arc. if you do remember the website, let me know. I shall hunt for it!
ok well here’s what i came up with:

1, http://www.the-art-of-web.com/css/bouncing-ball-animation/
bouncing ball but linear motion

2, http://www.kaizou.org/2011/06/pure-css-bouncing-balls/comment-page-1/#comment-3467
got the arc and everything but its going to take me some time to gain an uderstanding of how the code works, so if I figure it out, you shall see my example soon!

3, http://johntidey.tumblr.com/demos/dribbbleball
this is probably the one you saw @ChristopherBurton but its only webkit

[furrball1383]

Ok so I have it ‘kind of’ working.
My main problem being that I am quite terrible at creating my own JS which would have saved me tons of time. With javascript I could have pretty much specified a formula to create the co-ordinates that the ball needed to be at every step of the way, but instead I chose to sit and do it step by step in key frames. Not the smoothest animation out there, but I’m at my wits end. and so here is the example

http://jsfiddle.net/4qUc2/

My problem with doing it in java script is that the function I want is a sin curve with decreasing amplitude and wavelength that produces 3 bounces for the ball before it winds up at (0px, 0px).
At the same time, since the size of the ball is constantly increasing, this means that I can’t have the same x co-ordinates for the floor on every bounce because the ball is bigger with each bounce. ugh.
Anyway, I hope someone takes a look at it and lets me know how I can create the same effect but with less code. If you decide to say use JS I would need some sort of example of how to go about it.

I did also look into using canvas as an option, but having the image replaced and redrawn each time while having it rotate and also figuring out the co-ordinates might make me weep, so I gave up on that idea. Sometimes its harsh when you have an idea in your head but don’t have the programming skill to pull it off. I know the same thing could be done in flash and would take me hardly any time, but the purpose of this exercise was to create it using css animations. @sl1dr or @ChristopherBurton I hope you guys take a peek!

[joshuanhibbert]

After much stuffing around: http://jsfiddle.net/sl1dr/W5cyE/

It would be much smoother with javascript.

[furrball1383]

hey sl1dr, the ball wouldn’t move in your fiddle, anyway, thanks for the attempt, i noticed that you used pure css for the background pattern. Tre cool! Also, I definitely agree about the js being smoother, but to that end I need to figure out how to adjust the formula to deal with the ball’s increasing size. still, trying to accomplish the motion using js shall is my ongoing attempt as i believe I have taken it as far as I can go using only css

[joshuanhibbert]

@furrball1383 Webkit only (chrome or safari). You can add moz prefixes if you like.

[furrball1383]

It works very well once I switched webkit out with moz, the only thing is making it browser compatible would atleast double the code which is why i’m still going to try and carry it out with js. Awesome stuff and thanks for taking a dabble at it sl1dr. Just one question, how did you get the ball in code, is there a program that converts pictures to code?

[joshuanhibbert]

Yes there is. Chris has a post about it on here: https://css-tricks.com/5970-data-uris/

[Author]

Posts