WebAnimation with CSS3-Transitions and -Transformations :: HowTo

When you visit my website, you can see some elements moving and fading while hovering over the browser-viewport. In this article I want to explain how I did it: 

 

First you must know, that all elements in a website could be addressed by CSS (Cascading StyleSheets) commands for modifying the color, the size and the position of each object. That’s the main goal of using CSS: Just to manipulate these three options!

But now we want to start an animation, so we need more options for each object to be changed: A start-position, an end-position and the duration of that activity.

But before we begin to create these elements, we must know, that one CSS-Rule is acting on every page and at every time we’re visiting a website:

This CSS command is always active and true, because a website consists of an HTML-document and has a BODY for containing the scripts for the output to the browser.

There are some CSS declarations for user-interaction, which we want to use for our animation:

These CSS commands are ready out-of-the-box and available in every modern browser with HTML5 support.

hover = User moves with his pointerdevice over an element to activate the CSS rule

blur = User moves with his pointerdevice to a different element to activate the CSS rule

focus = User moves with his pointerdevice to the element to activate the CSS rule

When a user visits a website, we know, that the CSS rule “html body” is always active (true). Great! We have a state of a website for starting our animation with it.

To initiate an animation when the user visits our website, we use the “html body” CSS directive in combination with the pointerdevice declarations:

So we have a complete new CSS directive which differs from the initial state at the beginning of a pagevisit and are able to use this new state for define an end of our animation.

So far… so good. But how to use this in CSS for other elements on our page?

The answer is simple: Just write the starting and ending CSS directive before each normal CSS command.

For example, you want to call a DIV with the ID “container”, then type:

This is possible, because HTML and BODY are the parent-elements of each object in the website. Always!

That’s the basic way I’m using the state of a website with the knowledge, if the user is onto the BODY element with the pointerdevice, respective the viewport has been hovered…

 

Now we can write CSS with two states of activity: One at the first pagevisit, and the other when hovering with the pointerdevice over the viewport.

An animation needs a duration. A given time is responsible for a transition and/or transformation run of an object. Without that delay, the animation would just “blink” or “flickr”.

As an example, a CSS3 definition of a time delay of 250 milliseconds for an object is given as following command:

You can add a position, a size and other CSS definitions into that rule. Then you write the same CSS declaration, but this time with a hover-statement as written above.

I can’t explain all CSS3 features in this article, because of too much information, but I can give you a hint to write these CSS definitions with ease. Use the great Online CSS3-Generator: http://css3generator.com/

The generator is a great tool and helps you to find correct values for writing CSS3 for your own projects.

There could be different or better techniques using CSS3 with :hover or :blur. But I’ve got my experience with this combo and I like it.

 

Happy coding…

Share & Like

Leave a Reply

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