:::: MENU ::::

Beginner Tutorial – Introduction to CSS3 transitions and making it reusable using lessjs

During early 2000 there wasn’t any way to create HTML/CSS transitions without Microsoft DirectX Transformations. So back then, during 2002-2007 most websites were using flash to make interactive animations. But then they realize flash site owner were losing business as Google were unable to rank their content within flash. So, they moved to javascript frameworks to create clean animations and transitions.  Now W3C has created draft for all browsers to implement native CSS3 support for animations and transitions. Let’s create a simple css3 transition.

changing height of element while mouse hovers it.

HTML

Now we applied two css class to our element.

  1. box – that will add css attributes to create box like element.
  2. animate_height – It’ll create element while mouse hovers it.

CSS

Explanations:-

  1. What do we want to animate?
    =>  height
    So, css property transition-property will be height i.e. 
  2. For How many time we want to run animation?
    => Let’s say 0.6 seconds i.e. 
  3. How do we want to animate?
    => let’s say ease (there are more options available like linear, ease-in, ease-out, ease-in-out etc) 
  4. When do we want to animate?
    => On mouse hover
    i.e. set all css rules on css pseudo selector class 

Run this demo

Creating other transitions

[1] Animating background color of element using CSS3 transitions.

HTML

CSS

We already have box selector defined above.

See demo:

[2] Animating width of element using CSS3 transitions.

CSS:

Demo –

[3] Animating transparency of element using CSS3 transitions.

HTML

CSS

Demo –

[4] Animating position of element using CSS3 transitions.

HTML

CSS

Demo

[5] Animating size of element using CSS3 transitions.

HTML

CSS

  • transform is a css property that helps elements transformation.
  • When you use css transform property to move or scale the element, they are neither absolute nor relative to DOM. But still static.
  • So moving elements with translateX and translateY is better than top/left positioning.

Demo:

There are many other CSS3 transformations. Please refer it here.  Summing up all to gather I created one demo here

Now, Let’s make code more reusable using LESS (The Dynamic Stylesheet Language)

  • Download less.js from http://lesscss.org/
  • Include FIRST your css file in <HEAD> tag
  • Include less.js then so that less.js can read your .less file

Declaring common variables

Creating our box using transitions namespace

Simple way to do that

In our case

Calling CSS namespace within selectors

So, class selector “box”  will inherit all style rules from box function of transitions namespace.

Animating height of element using LESS namespace and CSS3 transitions

Above code will generate following css code. If you run,

Demo – http://code.vikaskbh.com/transitions/


So, what do you think ?

  •