CSS Transition on Hover

Hover over a div and watch it change size and rotate.

by Colin Soderstrom

HTML

<div>Hover over me to see the transition effect!</div>

CSS

div {
    width:100px;
    height:100px;
    background:red;
    padding: 10px;
    font-family: arial;
    transition:width 2s, height 2s;
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
div:hover {
    width:200px;
    height:200px;
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg); /* Safari */
}