How to: CSS Transitions and Transforms

Using CSS transitions instead of other scripting solutions (like JavaScript or jquery) is a great way to add graceful and beautiful animations to your website’s pages while having a responsive experience, plus CSS transitions are supported by all latest versions of major web browsers (IE10, Firefox, Chrome, opera …)

What is CSS transitions :

CSS transitions provides a simple way to change one or multiple properties smoothly from one value to another over a specified duration. CSS transitions are usually triggered by an element’s state or event changes like ":hover", ":checked", "focus" or whatever.

A simple CSS transitions example :

.mydiv
{
    background-color: Black;
    transition-property: background-color;
}
.mydiv:hover
{
    background-color: Red;
}

This code will run correctly but certain browsers/old versions will need prefixes to render the css3 animations: “-o” for opera, "-moz" for mozilla and “-webkit” for Chrome and Safari :

.mydiv
{
    background-color: Black;
    transition-property: background-color;
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -o-transition-property: background-color;
}
.mydiv:hover
{
    background-color:Red;
}

CSS Transition Properties :

You can have more control over the CSS transition with these properties :

 - transition-property: The names of CSS properties to which the transition effect will be applied (separated by a comma) , or "all" (all properties will be transformed).
 - transition-duration: Duration of the gradual transition (ex: 0.5s)
 - transition-delay: Initial delay before starting the transition
 - transition-timing-function: Time curve function for the transition (ex: linear, ease, cubic-bezier(n,n,n,n)...)

.mydiv
{
    background-color: Black;
    width:100px;
    height:50px;
    transition-property: background-color,width,height;
    transition-duration: 1s,0.5s,0.5s;
    -webkit-transition-property: background-color,width,height;
    -webkit-transition-duration: 1s,0.5s,0.5s;
    -moz-transition-property: background-color,width,height;
    -moz-transition-duration: 1s,0.5s,0.5s;
    -o-transition-property: background-color,width,height;
    -o-transition-duration: 1s,0.5s,0.5s;
}

.mydiv:hover
{
    background-color: Red;
    width:200px;
    height:100px;
}

We can also group the transitions properties into one line (shorthand notation) :
=> transition: property duration timing-function, ...

transition: width 2s linear, height 2s linear;

Css transitions and Javascript :

Let's take things a bit further and use javascript to control CSS transitions.

1/ Triggering transitions from Javascript

All we need to do is set a new value to one or many of the properties already declared in the transition-property.

When called, the following function will change the css width and height properties of our html element, the old values will be gradually changed to the new ones :

function BeginTransition() {
    var el = document.getElementById('img1');
    el.style.width = "500px";
    el.style.height = "500px";
}

2/ Capturing the end of a transition

This javascript code will throw an alert message everytime a transition is completed :

function transEnd(){
    alert("Transition Ended");
}
	
var el = document.getElementById('img1');

// for FireFox
el.addEventListener("transitionend", transEnd);
// for Chrome
el.addEventListener("webkitTransitionEnd", transEnd);
// for Opera
el.addEventListener("oTransitionEnd", transEnd);