Today, we are going to doing an experiment with CSS3 Animation. In our previous post, we discussed how to re-create “marquee” effect using CSS3 Animation. This time, we will try to create a “notification bar” with bounce effect.

So, let’s get started.

• View Demo

Getting Started

Let’s create a new HTML document and add the following markup to structure the notification bar.

  <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.

  .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;  }  

At this stage, this will give us the following result in browsers.

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.

  0% {  	transform:translateY(-100%);  	opacity: 0;  }  5% {    	transform:translateY(-100%);      opacity: 0;  }  

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.

  70% {    	transform:translateY(0%);      padding-bottom: 7px;  }  80% {  	transform:translateY(-15%);  }  90% {  	transform:translateY(0%);  	padding-bottom: 8px;  }  95% {  	transform:translateY(-7%);  }  97% {  	transform:translateY(0%);  	padding-bottom: 9px;  }  99% {  	transform:translateY(-3%);  }  100% {  	transform:translateY(0);  	padding-bottom: 9px;  	opacity: 1;  }  

That’s all the codes we need right now, now you can view the bounce effect in action from the link below.

• View Demo
• Download Source

Further Resources

Below are good resources for digging into CSS3 Animation, Transformations and Bounce Effect further.

• Creating Advanced “Marquee” With CSS3 Animation — Hongkiat.com
• CSS3 2D Transforms — Hongkiat.com
• What are all the equations we use to calculate how bounces work? — StackExchange
• Bounce Effect with jQuery — jQuery.com
• 3D Bouncing Ball with CSS3 — Codrops

Editor’s note: Jarrod Wright, the owner of Subtle Network Design & Marketing, offers search engine marketing and creative design services to a wide variety of clients. You can follow him on Twitter.

Online business veterans know it’s the little things that set a company apart from the competition. Newbies will quickly learn that fact! No matter what your level of expertise, there are certain things you are probably overlooking when it comes to your website’s design.

The perfect example is your site’s favicon. Do you know what a favicon is? Are you using yours effectively?

An Introduction to Favicons

The term favicon is short for “favorites icon.” Originally, the image was used to distinguish pages in a list of favorites (now commonly referred to as bookmarks). Over time, favicons have developed other uses as well.

Additional locations you’ll see a favicon include:

• the left side of the internet browser’s address bar for active pages
• in the drop-down list of predicted URLs (if your browser uses a prediction service)
• in the various open tabs of your browser

The Implications for an Online Business

You might be wondering why on earth we bothered to dedicate an entire post to favicons. Well, this is why:

Favicons Make Life Easier

By now, most people who use the internet regularly are accustomed to seeing favicons. Your average internet user probably doesn’t know too much about them. However, users do appreciate their presence and definitely notice their absence.

The brain can process images much easier and quicker than words. When browsing through a list of favorites, users can quickly find the site they want by the accompanying favicon.

The same thing happens when an internet user has several tabs open; the favicon makes it easy to distinguish between different sites.

If a site doesn’t use a favicon, there will simply be a blank page listed beside the website name. If a site doesn’t use a favicon, there will simply be a blank page listed beside the website name.

When a user has multiple bookmarks without a favicon, selecting the desired site becomes much more difficult since all the blank pages will look the same.

Favicons Establish Credibility

Your site’s killer design will definitely grab visitors’ attention. However, once their attention has been snagged, you need to induce them to stay for awhile. When the internet first came about, “sticky websites” was a phrase people used to describe sites that did just that – compelled visitors to stick around.

One of the ways to do that is to project the appearance of a credible business. Otherwise, visitors will leave before they can appreciate what the site (and business) has to offer.

Including a custom favicon is one way to establish credibility. It may seem like a small gesture, but visitors will notice and appreciate what it signifies. Likewise, visitors also notice when WordPress newbies use the default favicon that came with their theme. While something is better than nothing, custom is better than default.

A custom icon tells visitors you are willing to go the extra mile to meet their needs. That professional attitude builds a customer’s trust.

Favicons Build Brand Awareness

We all know the importance of logos. It is what visually connects us to a company. What would McDonald’s be without the golden arches? Or Twitter without the little blue bird? Whether it is derived from your company’s logo or an entirely new visual representation, a favicon functions like a miniature logo. It helps internet users remember your brand.

Creating a Favicon

Is a custom favicon necessary? No. However, I think we have pretty much established they go a long way in improving the overall quality of a visitor’s experience.

If you are ready to create a favicon, upgrade from your WordPress default, or enhance an outdated design, here is what you need to do:

• Search for a free favicon generator on the web (there are tons to choose from)
• Create your file (usually 16 pixels by 16 pixels)
• Go to the images section of your theme
• Add or replace the default favicon with your custom design

Remember, a favicon is a very small image. Don’t add too much detail and don’t be too fancy. An indistinguishable favicon isn’t much better than no favicon at all.

Try using the initial letter of your company’s name in a distinct font. The Google favicon is a perfect example of this. While it may seem like a simple way to go, using your company’s initial can be as basic or elaborate as you want.

If you already have a company logo, see if you can incorporate some or all of it into your favicon. Check out how Amazon combined both their logo and company initial.

If you are new to the online world, this may be the first time you’ve given any thought to your favicon. As a business veteran, it has probably been several years since you’ve even glanced at your custom image. Either way, make sure your favicon is an asset – not a hindrance – to your website’s success.