CSS Animation in Web and Interactive Design

This time I am going to share about CSS Animation and it’s use in Web Design. And a little project that use pure CSS to spice up your resume web page. 

People may ask, “Why use coding to do animated effect when we already have other easier tools?”

First, compare to pure motion graphics, CSS3 and HTML5 animations have the strength of interactivity, that the the animation could be triggered by an action make people involved in the design. This action could be such as scroll, mouse over, drag and draw or more advanced like postures of iPhone. Yes, it is greatly used to web app games already. However, since we are talking about web page, we are more concerned about the content and the message that needs to be delivered and how animation enhance the delivering, not distract or overwhem the viewers. 

And some people may ask about flash? The future of Adobe Flash has been debated for a while over the community. The basic idea is the less  distributions of flash player that many mobile devices don’t support it anymore. Maybe that’s why adobe is now developing edge animate, a software looks extremely like the hybrids of Flash, Dreamweaver and After Effect, and the result is a HTML5 page. 


Here is some examples of the CSS animation (some might be integrated with jQuery. )

ORIGINAL HOVER EFFECTS

image

Hover effects, sounds so normal and boring, can be very fancy with CSS animation.


THE CURSOR MONSTER

image

An animated cute monster that will interacte with your mouse cursor!! Sounds so fascinating~!!!


THE LETTER HEADS

image

This example is an application similar to the previous monster one, interacting with you mouse movement, however presenting it as the relationship of light and shadow. And the idea of letters’ silhouette is BRILLIANT!! 


OUR SOLAR SYSTEM

image

This example shows the simplicity beauty of css animation. And also how it could be interact with the viewers.


In my opinion, the animation on website doesn’t need to be fancy and complicated. however, it has to be integrated with the design and help the message delivered. Otherwise, it will only be something eye catching (though it always partly served) but with less purpose. Of course this is just my personal aspect and idea, we are very welcome to have people discuss and share the thought with us!! 

Therefore, the coming up post next week I am going to write a simple tutorial about using CSS and HTML plus a little bit JavaScript (jQuery) to have an resume infographic on the website animated!!

You can see a basic example here.

Since I am still in my learning stage, hope in the meantime of writing this series of tutorial, I can come up with more great stuffs to share with you guys!