One of our clients, Life is Crap recently ran a one day promotion offering 25% off their Life is Ruff brand. To ensure that all visitors to their site knew about the promotion, we designed and built a modal overlay that was displayed to a visitor on their first visit of the day.
At their most basic level, CSS3 animations can be used to ease transitions between states, e.g. hover on/off: hover here. If you’re using a modern browser (Firefox, Chrome, Safari, or IE 9/10) you will notice a smooth transition (slowed for emphasis) between our standard blue to indicate a link and a nice red. If your browser doesn’t understand CSS3 animations, you’ll simply alternate between blue and red. Graceful degradation!
Yes, I know: boring. Let’s get to the cool stuff.
Here’s a pretty basic animation we did for William Fox Elementary School’s PTA.
First, our graphic designers animated the hummingbird’s wings using some old magic: the animated gif. Once the hummingbird is flapping his wings, we move him around the screen at varying speeds and angles using CSS3 keyframe animation.
Now, let’s get back to that modal overlay we mentioned at the beginning, it’s a great example of what we can accomplish when we animate multiple objects and apply multiple effects. What are our animated elements? A ball and a shadow. What all happens?
- Horizontal movement of the ball
- Horizontal movement of the shadow
- Vertical movement of the ball as it “bounces”
- Arcing of the ball to combine vertical and horizontal motion
- The Spin of the ball
- Compression and wobble of the ball on every bounce
- The ball and shadow get smaller as they appear to move away from the viewer in z-space.
Phew! That’s quite a lot for a 5 second animation of a ball bouncing. However, we think you’ll agree that when it all comes together, it catches a visitor’s eye and will drive more traffic through to the Life is Crap sale!