CSS3 transitions

by Mohammed Ismail Ansari

HTML

<div id="nice-div">
Listen, and understand! That Terminator is out there! It can't be bargained with. It can't be reasoned with. It doesn't feel pity, or remorse, or fear. And it absolutely will not stop, ever, until you are dead.
</div>

CSS

#nice-div
{
    width: 200px;
    height: 150px;
    background-color: Gray;
    transition: width 2s, height 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

#nice-div:hover
{
    width: 300px;
    height: 300px;
}

JavaScript

// CSS3 transitions