CSS transitions demo

A demonstration of CSS transitions.

by William Green

HTML

<div id="projectContainer">
    <div id="divOne">Hover on me (see code on lines 13-30 in CSS)</div>
    <div id="divTwo">Click on me (see javascript and css)</div>
</div>

CSS

#projectContainer {
    background-color:#ddd;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
html, body {
    padding:0;
    margin:0;
}
#divOne {
    /*transitions*/
    /*vendor prefixes for older browsers*/
    -o-transition:all .4s ease;
    -moz-transition:all .4s ease;
    -webkit-transition:all .4s ease;
    -ms-transition:all .4s ease;
    /*normal syntax*/
    transition:all .4s ease;
    
    background-color:red;
    height:100px;
    display:table;
    line-height:100px;
}
#divOne:hover {
    background-color:green;
}
#divTwo{
    /*css transitions*/
    -o-transition:all .4s ease;
    -moz-transition:all .4s ease;
    -webkit-transition:all .4s ease;
    -ms-transition:all .4s ease;
    transition:all .4s ease;
    
    
    background-color:green;
    line-height:100px;
    height:100px;
    display:table;
}

JavaScript

window.onload = function(){
	document.getElementById('divTwo').onclick = function(){
    	this.style.backgroundColor = 'orange';
    };
};