Writing CSS3 Animation Keyframes

The basic idea on how the bounce will run is that when the object drops on the surface the first time, it bounces of the surface and will reach its highest level. Then it gradually reaches a lower point with every subsequent bounce, until the object stops bouncing. This is illustrated in the following figure.

Step 1: Creating Animation Keyframe

Now, let’s start writing on the CSS3 Animation Keyframe in the stylesheet. In this example, we simply name this keyframe bounce.

@keyframes bounce {
}

Keep in mind that in this tutorial we will use the standard @keyframe syntax from W3C to make the codes look simpler. But, in order for the animation to work across the browsers, the vendor syntax (-webkit-, -moz-, -o-) should be included and you will find them, later on, in the source codes.

Step 2: Specifying Initial Position

First, we set the object to the top of its initial position. In CSS3 Transforms, we add negative value for the Y-axis. In the following code snippet, we set the position for 0% to 5% of the time frame. So, the notification bar will stay a little while in that position.

Step 3: Specifying the First Bounce

Then, from 5% to 15% of the time frame, the object start moving to its original position. We set the translateY property back to 0%. Typically, an object that bounces has elasticity.

When this object strikes a solid object, the side of that object that hits the surface, should be a little compressed or deformed. Thus, in our case, we will decrease the padding-bottom — from 10px to 5px.

15% {
transform:translateY(0);
padding-bottom: 5px;
}

The object will bounce back upwards after hitting the surface. At this point, the object bounces at its highest point and we set it for 50% at 30% of the time frame.

30% {
transform:translateY(-50%);
}

Step 4: Specifying the Second Bounce

After reaching the peak, the object should be back to 0 position, or in other words, hitting the ground. The object will be less deformed than the previous hit. So, at this point, we decrease the padding-bottom of the object to only 6px.

40% {
transform:translateY(0%);
padding-bottom: 6px;
}

Then it bounces.

This time, it will only reach the point lower than the first one; it moves upwards 30% from the current position.

50% {
transform:translateY(-30%);
}

Step 5: Countinuously Bouncing Until It Stops

These events repeat until the end of the time frame and the following are the rest of the Animation — from 70% to 100% of the time frame.