12/css3 transitions.html

<!DOCTYPE html>
<html>

<head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background: blue;
        transition: width 2s;
        -moz-transition: width 2s;
        /* Firefox 4 */
        -webkit-transition: width 2s;
        /* Safari and Chrome */
        -o-transition: width 2s;
        /* Opera */
    }

    div:hover {
        width: 300px;
    }
    </style>
</head>

<body>
    <div></div>
    <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
    <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>

</html>