Home » Tutorials » HTML & CSS » Create Banner Using CSS Animation & Keyframe

Create Banner Using CSS Animation & Keyframe

Create Banner Using CSS Animation & Keyframe

  • Stumble it!
  • Share

Have you ever think about creating an animated web banner using CSS3 Animation & Keyframe?

Since the gradual disappearance of Flash in the market, currently most of the web designers & web developers are using JavaScript, HTML5 and CSS technologies as an alternative for that. The HTML5 Canvas & SVG allow web developer to create animation and manipulate using JavaScript; The CSS allow web designer to create animation using just only CSS syntax and the designer doesn’t need to have any programming knowledge for that.

In this lesson, we will talk about how to create an animated web banner using CSS3 Animation & Keyframe. Please take a look on the demo, to get the overview of how does the banner will look like.

View Demo

If you haven’t already, please be sure to read the beginner article – “Create Stunning Animation Using CSS3 Animation & Keyframe”.

Preparing Resources

The animated web banner that we are going to create is about a Flying Super Boy that will fly into the screen from left, then the banner’s title and content fade-in. So following images are required for us to create the banner, please save all images into your local drive for later use.

Static Bottom Cloud
Static Bottom Cloud

Moving Cloud (140x65)
Moving Cloud (140×65)

Moving Cloud (86x40)
Moving Cloud (86×40)

Moving Cloud (120x55)
Moving Cloud (120×55)

Flying Super Boy
Flying Super Boy

The HTML Structure

Once we have all the resources ready in our local drive, we will start to create the HTML document. Following is how our HTML document will look like:

<!DOCTYPE html>
<head>
<title>CSS3 Animated Web Banner | onlyWebPro.com</title>
</head>

<body>
<div id="banner_wrapper">
    <div id="content">
        <h2>Need Help From Super Boy?</h2>
        <p><a href="#">Learn More</a></p>
    </div><!-- END content -->
    
    <div id="moving-clouds">
        <ul id="group-1">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
            <li class="cloud-4"></li>
        </ul>
        <ul id="group-2">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
            <li class="cloud-4"></li>
        </ul>
    </div><!-- END moving-clouds -->
    
    <ul id="flying-man">
    	<li></li>
    </ul><!-- END flying-man -->
    
    <ul id="bottom-cloud">
        <li></li>
    </ul><!-- END water -->
    
</div><!-- END banner_wrapper -->
</body>
</html>

Description:

  • First of all, we have to create a div with id – “banner_wrapper” as a container to hold the entire banner.
  • Place all banner title, description / content into the div with id – “content“.
  • Create a “moving-clouds” div that contain “group-1” & “group-2“. We will animate the “moving-clouds” div later using CSS syntax.
  • The “group-1” & “group-2” UL elements used to hold all cloud images.
  • A UL element with id “flying-man”, hold the animated GIF – Flying Super Boy.
  • We need another UL element “bottom-cloud” to hold the Static Bottom Cloud as a background for the banner.

The Basic CSS Syntax

Please copy & paste the following CSS and place it in the head section of HTML document.

<style>
/*****************
Pre Settings
******************/
ul li {
	list-style-type: none;	
}

#banner_wrapper {
	background: #d1edf9;
	border: 1px solid #759BAA;
	box-shadow: 0px 0px 5px #9EC8D8;
	height: 300px;
	margin: 40px auto 0;
	overflow: hidden;
	position: relative;
	width: 500px;
}

#banner_wrapper #content {
	margin: 30px auto 0;
	text-align: center;
	position: relative;
	z-index: 2;	
}

#banner_wrapper #content h2 {
	font-family: Tahoma, Geneva, sans-serif;
    color: #137dd5;
    font-size: 50px;
	margin: 0;
	animation: delayed-fade-animation 2s 1 ease-in-out;	
	-webkit-animation: delayed-fade-animation 2s 1 ease-in-out;
    -moz-animation: delayed-fade-animation 2s 1 ease-in-out;	
}

#banner_wrapper #content p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #137dd5;
    font-size: 20px;
	animation: delayed-fade-animation 3s 1 ease-in-out;
	-webkit-animation: delayed-fade-animation 3s 1 ease-in-out;	
    -moz-animation: delayed-fade-animation 3s 1 ease-in-out;	
}

#banner_wrapper ul#flying-man {
    height: 100px;
	margin: 0;
	padding: 0;
    position: absolute;
    bottom: 25px;
    left: 20px;
	z-index: 2;
    overflow: visible;
	width: 250px;
	animation: flying-man-animation 3s 1 ease-out; 
	-webkit-animation: flying-man-animation 3s 1 ease-out; 
    -moz-animation: flying-man-animation 3s 1 ease-out; 
}

#banner_wrapper ul#flying-man li {
	background: url(images/flyingman.gif) no-repeat left top;
    height: 100px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    overflow: visible;
	width: 150px;
	animation: floating-animation 1s infinite ease-in-out;
	-webkit-animation: floating-animation 1s infinite ease-in-out;
    -moz-animation: floating-animation 1s infinite ease-in-out;
}

#banner_wrapper ul#bottom-cloud li {
    width: 500px;
    height: 165px;
    background: url(images/bottom_cloud.png) no-repeat left bottom;
    z-index: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

#banner_wrapper #moving-clouds {
    position: absolute;
    top: 0px;
    z-index: 1;
	animation: cloud-animation 30s infinite linear; 
	-webkit-animation: cloud-animation 30s infinite linear; 
    -moz-animation: cloud-animation 30s infinite linear; 
}

#banner_wrapper #moving-clouds #group-1 {
    width:500px;
	padding: 0;
    position: absolute;
    left:0px;
}
#banner_wrapper #moving-clouds #group-2 {
    width: 500px;
	padding: 0;
    position: absolute;
    left: 500px;
}

#banner_wrapper .cloud-1 {
    width: 140px;
    height: 65px;
    background: url(images/cloud01.png) no-repeat left top;
    position: absolute;
    top: 10px;
    left: 70px;
}

#banner_wrapper .cloud-2 {
    width: 86px;
    height: 40px;
    background: url(images/cloud02.png) no-repeat left top;
    position: absolute;
    top: -25px;
    left: 300px;
}

#banner_wrapper .cloud-3 {
    width: 120px;
    height: 55px;
    background: url(images/cloud03.png) no-repeat left top;
    position: absolute;
    top: 100px;
    left: 350px;
}

#banner_wrapper .cloud-4 {
    width: 86px;
    height: 40px;
    background: url(images/cloud02.png) no-repeat left top;
    position: absolute;
    top: 75px;
    left: 10px;
}
</style>

Above is the pre-setting that used to assign the images, set the position, width, height, and etc to all the HTML elements that we defined just now. I’m not going to explain it one by one, instead will just only focus on these 5 styles, which we will apply CSS Animation & Keyframe syntax later: –

  • #banner_wrapper #content h2: This is the CSS style that control the appearance of the title. We have apply fade-in animation – “delayed-fade-animation” to this element.
  • #banner_wrapper #content p: This style is controlling the appearance of the content. We have apply the same fade-in animation to it as well, but with longer duration. So the content will appear after the title.
  • #banner_wrapper ul#flying-man: This style contain an animation “flying-man-animation” that animate the Flying Super Boy to fly into the screen from left.
  • #banner_wrapper ul#flying-man li: Another styling for Flying Super Boy that contain the floating animation “floating-animation“. This animation is repeating until the page tab / browser is close.
  • #banner_wrapper #moving-clouds: The style contain the animation “cloud-animation” for the group of clouds.

The CSS Keyframe Syntax

Finally, we have to create the animation using CSS Keyframe syntax. Please add the following code into the CSS section:

/*****************
Animation Settings
******************/
/*CSS Standard*/
@keyframes flying-man-animation {
    0%   {left: -200px;}
    100% {left: 20px;}
}

@keyframes floating-animation {
	0% { bottom: 0px; }	
	50% { bottom: 3px; }
	100% { bottom: 0px; }
}

@keyframes delayed-fade-animation {
    0%   {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes cloud-animation {
    0%       {left: 0px;}
    99.9999%   {left: -500px;}
    100%     {left: 0px;}
}

/*Mozilla Browser*/
@-moz-keyframes flying-man-animation {
    0%   {left: -200px;}
    100% {left: 20px;}
}

@-moz-keyframes floating-animation {
	0% { bottom: 0px; }	
	50% { bottom: 3px; }
	100% { bottom: 0px; }
}

@-moz-keyframes delayed-fade-animation {
    0%   {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

@-moz-keyframes cloud-animation {
    0%       {left: 0px;}
    99.9999%   {left: -500px;}
    100%     {left: 0px;}
}

/*Webkit Browser*/
@-webkit-keyframes flying-man-animation {
    0%   {left: -200px;}
    100% {left: 20px;}
}

@-webkit-keyframes floating-animation {
	0% { bottom: 0px; }	
	50% { bottom: 3px; }
	100% { bottom: 0px; }
}

@-webkit-keyframes delayed-fade-animation {
    0%   {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes cloud-animation {
    0%       {left: 0px;}
    99.9999%   {left: -500px;}
    100%     {left: 0px;}
}

Description:

  • “flying-man-animation“: We have specified the keyframe to move the Flying Super Boy to fly into the screen from left by changing the value of “left” property.
  • “floating-animation“: We have specified 3 condition for the floating animation. We want the Flying Super Boy to float from bottom to top when the animation reach 50% and move down when animation is reach 100%.
  • “delayed-fade-animation“: We have specified the opacity to 1 when the animation reach 100%. This fade-in animation is applied to the title and the content of the banner.
  • “cloud-animation“: 3 condition has been specified for this animation. Since the “group-1” cloud & “group-2” clouds is in same formation and width (500px), if we want the seamlessly looping animation, we must make sure the position of the “moving-clouds” is at -500px when the animation reach 99.999%.

Save your document and view it in supported browser, such as Firefox, Chrome and Safari!

Conclusion

The CSS Animation & Keyframe syntax allow us to create web animation without requires any programming knowledge such as JavaScript or Flash Action Script.

View Demo

  • Create Facebook App Style Slide-Out Navigation
  • Build Intelligent Layout Using CSS Calc() Property
  • Design Your Own Responsive Web Template
  • Budi Anduk

    very cool tutorial :-)

  • http://twitter.com/overbyte overbyte

    very cool – i would also check out the greensock TweenMax/Lite/TimelineMax/Lite js platform http://www.greensock.com/v12/ especially if you’re an ex Flash dev used to the platform. It is much more browser compatible than css3 as well.

Android, iOS Development Tutorials

Most Popular

Latest Posts