Category : Css | Author : Chtiwi Malek | First posted : 11/21/2012 | Updated : 8/14/2014
Tags : css, animations, transitions, html, javascript
How to: CSS Transitions and Transforms

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 :

 
 
 

This CSS code below will gradually change the color from black to red :
.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);
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Nice post
You’ve written nice post, I am going to bookmark this page, thanks for info. I actually appreciate your own position and I will be sure to come back here <a href="https://www.reecoupons.com/categories/black-friday">Black Friday promo codes</a> . This is a really good post. Must admit that you are among the best site I have read. I suppose I am very lucky to have found this site! I hope to read more number of reliable posts.
- by sophia charles on 11/1/2017
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :