Animation in CSS, Animate your website

CSS stands for Cascading Style Sheet, it is a format that tells the web browser how to display the page. In CSS3 you can add transitions and effects to a page with only a little CSS and sometimes JavaScript. Animation in CSS can make your website look more professional, it can also look tacky. Animated CSS means not having to load JQuery on your website for an effect, however It may not be compatible with all browsers (most work though).

Examples of Animation in CSS

If you go to my website often then you will know I like the “fade in with slide down” effect – you should have seen it when you loaded this page. If you didn’t then you may be using an unsupported browser, though some computers aren’t powerful enough to display the effects properly. Here is an Example of a pure CSS div fade in.

If you want the HTML and CSS for the above page, it’s here:

<p>
This example uses pure CSS, and will fade in a div over 20 seconds.
</p>
<style type="text/css">
.fade1{
    animation: fadeani 20s; /* All modern browsers that obey the W3C standerds SHOULD obey this */
    -moz-animation: fadeani 20s; /* Firefox Compat */
    -webkit-animation: fadeani 20s; /* Safari & Chrome Compat */
    -o-animation: fadeani 20s; /* Opera Compat */
}
/* The actual fade */
@keyframes fadeani { /* W3C */
    from {
        opacity:0;
    }
    to {
        opacity:1;

    }
}
@-moz-keyframes fadeani { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;

    }
}
@-webkit-keyframes fadeani { /* Safari & Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;

    }
}
@-o-keyframes fadeani { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity:1;

    }
}
</style>
<div id="example1">
<p>
Div content, Div content, Div content, Div content, Div content, Div content, Div content, Div content, Div content, Div content, Div content!!!
</p>
</div>

So that is how you do a fade in on a div.

What else can I do with CSS Animation

If you bring in an element of JavaScript, the world is your oyster! You can make things expand on click and fade on, well whatever you wanted!

You could make an Ubuntu style notification display, by using the following code, but before we get to that, do you want to see an example of that? (For those of you who do not use Ubuntu, you should run you mouse over the black box on the example page)

HTML, CSS and Javascript:

<div id="example1" onmouseover="mover();" onmouseout="mout();">
<p>
Example text goes here,<br/>(I can't afford latin filler text)</p>
</div>
<p>
This example uses CSS and Javascript to make an Ubuntu style notification... Sort of...
</p>
<style type="text/css">
.notify{
	-moz-border-radius: 15px; /* Give it rounded look in older firefoxes */
	border-radius: 15px; /* Give it rounded look in everything except IE */
	float: right; /* Make it sit to the side */
	background-color: #000000; /* Make it black */
	opacity: 0.8; /* Make it slightly transparent */ 

	-moz-transition: all 1s; /* Make any change in javascript fade (older firefox compat)*/
	-webkit-transition: all 1s;  /* Safari & Chrome */
	-ms-transition: all 1s;  /* Internet explorer? */
	-o-transition: all 1s;  /* Opera */
	transition: all 1s; /* W3C (works with newer firefoxes) */

	width: 300px;
}
</style>

<script type="text/javascript">
function mover(){ //Called on mouse over
	var obj = document.getElementById('example1'); //Get our element
	obj.style.opacity = 0.2; //Set opacity to 0.2 (CSS will fade this for us)
}
function mout(){ //Called on mouse out
	var obj = document.getElementById('example1'); //Get element again
	obj.style.opacity = 0.8; //Fade back
}
</script>

(Yes I know, “firefoxes” is not a word, I just thought it would be funny)

So that is an example of using Javascript with CSS. Animation in CSS can be used to give your website, web app, online wizard or anything else you could think of a nice dynamic feel! But it can also be used on events too, so you could make text change color when something is finished.

Animation in CSS is more than just fades

You can do much more with CSS animation than just a mere fade. You can use (almost) every CSS property available, there are some that will not transition though.

Have a tinker and I’m sure you will find a transition that looks great on your website! It does not have to be on page load, (though I like the load effect on my website) it can be on anything you want. Experiment and try different things! Make the web more “fluid” and less “rigid” in feel.

2 thoughts on “Animation in CSS, Animate your website

  1. Ruby

    This website was… how do I say it? Relevant!
    ! Finally I’ve found something that helped me. Appreciate it!

    Reply
  2. Samantha

    Pretty nice post. I simply stumbled upon your weblog and wanted to mention that I’ve really loved surfing around your blog posts. In any case I will be subscribing for your rss feed and I’m hoping you write once more soon!

    Reply

Leave a Reply to Ruby Cancel reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>