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

<div class="box animate_background" >
Height Demo
</div>

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

.box {
height: 50px;
width: 200px;
background-color: #F6F5F1;
padding: 5px;
border-radius:10px;
margin: 10px;
cursor:pointer;
color: #0079FF;
border:2px solid #0079FF;
letter-spacing: -0.5;
font: 20px/50px 'PT Sans', sans-serif;
text-align: center;
}

.animate_height{
transition-property:height;
transition-duration:0.6s;
transition-timing-function:ease;
}

.animate_height:hover{
height:100px;
}

Explanations:-

1. What do we want to animate?
   =>  height
   So, css property transition-property will be height i.e. 

   transition-property:height;

2. For How many time we want to run animation?
   => Let’s say 0.6 seconds i.e. 

   transition-duration:0.6s;

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) 

   transition-timing-function:ease;

4. When do we want to animate?
   => On mouse hover
   i.e. set all css rules on css pseudo selector class 

   .animate_height:hover{}

Run this demo

Creating other transitions

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

HTML

<div class="box animate_background">
Background Demo
</div>

CSS

We already have box selector defined above.

.animate_background{
  	transition-property:background-color; 
   /* see background-color here */
	  transition-duration:1s;	
  }

  .animate_background:hover {
	background-color: #F6F5F1;
	color: #0079FF;
  }

See demo:

[2] Animating width of element using CSS3 transitions.

 
<div class="box animate_width">
Width Demo
</div>

CSS:

 
.animate_width:hover{
width:400px;
}
.animate_opacity{
transition-property:opacity;
transition-duration:0.4s;
}

Demo –

[3] Animating transparency of element using CSS3 transitions.

HTML

<div class="box animate_opacity" >
Opacity Demo
</div>

CSS

.animate_opacity{
transition-property:opacity;
transition-duration:0.4s;
}
.animate_opacity:hover{
opacity:0.4;
}

Demo –

[4] Animating position of element using CSS3 transitions.

HTML

<div class="box animate_position">
Position Demo
</div>

CSS

.animate_position{
position:relative;
transition-property:left;
transition-duration:0.4s;
top: 0;
left:0;
}

.animate_position:hover{
left: 100px;
}

Demo

[5] Animating size of element using CSS3 transitions.

HTML

<div class="box animate_scale" >
Scale Demo
</div>

CSS

.animate_scale {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.animate_scale:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

• 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

  <link rel="stylesheet/less" type="text/css" href="transitions.less" />

• Include less.js then so that less.js can read your .less file

  <script type="text/javascript" src="less-1.4.1.min.js"></script>

Declaring common variables

@box-bg-color: #F6F5F1;
@box-height: 50px;
@box-width: 200px;
@box-border-radius: 10px;
@box-border: 1px solid #0079FF;

Creating our box using transitions namespace

Simple way to do that

#namespace {
  .selector(@arguments:default-values) {
   // css rules here
  }
}

In our case

#transitions {
  .box () {
    background-color: @box-bg-color;
    height: @box-height;
    width: @box-width;
    border-radius: @box-border-radius;
    border: @box-border;
    line-height:@box-height;
    cursor: pointer;
    text-align: center;
    padding: 5px;
    margin: 10px;
    -webkit-box-shadow: 1px 1px 2px #aaa, 1px 1px 1px #6cf inset;
    box-shadow: 1px 1px 2px #aaa, 1px 1px 1px #6cf inset;
    font-size:20px;
    font-family:'PT Sans',arial,sans-serif;
  }
}

Calling CSS namespace within selectors

.box{
#transitions > .box;
color: #0079FF;
letter-spacing: -0.5;
}

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

#transitions {
  .animate( @property ; @time:1s ; @timing_function:ease) {
  -webkit-transition: @property @time @timing_function;
  -moz-transition: @property @time @timing_function;
  -o-transition: @property @time @timing_function;
  -ms-transition: @property @time @timing_function;
  transition: @property @time @timing_function;
  }
}

.animate_height{
#transitions > .animate(
    @property:height;
    );

    &:hover{
      height: 100px;
    }
}

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

lessc transitions.less transitions.css

.animate_height {
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}

.animate_height:hover {
height: 100px;
}

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