I had a lot of fun making the flickering neon lights so I thought I would play some more with css animations today. I wanted to create a bouncing ball that would bounce off the sides of the page. I created the ball by making a div inside of another div. The outside div was the horizontal div and the inside one was a vertical div. I set the width and height of the inside div so that it was a square and then used border-radius to change it into a circle. I used a radial gradient to make the ball look more like a marble.
I wrote two different animations, a “bounce” and a “travel” that controlled the vertical and horizontal movements respectively. I struggled to make the ball bounce naturally with css timing functions. When and how does a ball change in width and height as it bounces? How does a ball’s speed change?
My main problem today was that I started too late in the day and did not read up on css animations, in particular css timing functions. I do not have a good enough understanding of css animations and positioning so I had a lot of trouble getting the ball to bounce nicely within the container.
I think the end result still looks a little strange when it bounces off the bottom. Today really showed me that while you can learn a lot by doing, sometimes it’s good to not jump right in and to read up on the concepts first. Oh and to not start so late that you’re up into the wee hours of the night!