mithi

Today, we are going to doing an experiment with CSS3 Animation. In our previous post, we discussed How To give rotating effect of webpage. This time, we will try to create a “notification bar” with bounce effect.

So, let’s get started.

Let’s create a new HTML document and add the following markup to structure the notification bar.
1
2
3
<div class="css3-notification">
    <p>Hi, this is a notification and it bounces.</p>
</div>
Then, add some decorative styles to dress up the notification bar.
1
2
3
4
5
6
7
8
9
10
11
.css3-notification {
    font-size: .8em;
    text-align: center;
    padding: 10px;
    background-color: #111;
    color: #fff;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);
    text-transform: uppercase;
    position: relative;
    font-weight: bold;
}

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.Writing CSS3 Animation Keyframes.

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.
1
2
3
@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.


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.

1 comments:


  1. Great Post ! CSS3 tutorial with simple and easy examples,covering CSS3 Modules, Background Properties, Borders, Gradients, Shadow Effects, Web Fonts,Text,2D & 3D Transform, Transitions, Animations, Multiple Columns, User Interface, Box Sizing. HTML5 Tutorial & CSS3 Tutorial.

    ReplyDelete

 
Top
Mithilesh Joshi