CSS3 ??

CSS3 Transition

CSS3??? ??? ??????? JavaScript? ???? ??? ? ????? ?? ???? ???? ?? ??? ??? ? ????.

??? ??????

CSS3 ??? ??? ? ????? ?? ???? ????? ???? ?????.

?? ????? ?? ? ??? ???? ???.

??? ??? CSS ??? ?????.
?? ?? ??? ?????.

2? ?? width ??? ???? ?? ??:

div
{
transition: width 2s;
-webkit-transition: width 2s;
??
: ??? ???? ??? ???? 0??? ??? ???? ????.

??? CSS ?? ?? ???? ??? ?????. ???? ?? ?? ???? ??? ???? CSS ??? ?????.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background: #d7ffb5;
            transition:width 2s;
            -webkit-transition:width 2s; /* Safari */
        }
        div:hover
        {
            width:300px;
        }
    </style>
</head>
<body>
<div></div>
<p>鼠標(biāo)移動(dòng)到 div 元素上，查看過(guò)渡效果。</p>
</body>
</html>

????? ???? ??? ???

?? ??

?? ???? ?? ??? ????? ??? ??? ??? ?????.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: #92ffc7;
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s, height 2s, transform 2s;
        }
        div:hover {
            width: 200px;
            height: 200px;
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
<div>鼠標(biāo)移動(dòng)到 div 元素上，查看過(guò)渡效果。</div>
</body>
</html>

????? ???? ??? ???

?? ??

?? ??? ?? ?? ??? ?????? ????.

3 ??:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background: #ffedd7;
            transition-property:width;
            transition-duration:1s;
            transition-timing-function:linear;
            transition-delay:2s;
            /* Safari */
            -webkit-transition-property:width;
            -webkit-transition-duration:1s;
            -webkit-transition-timing-function:linear;
            -webkit-transition-delay:2s;
        }
        div:hover
        {
            width:200px;
        }
    </style>
</head>
<body>
<div>過(guò)渡</div>
<p>鼠標(biāo)移動(dòng)到 div 元素上，查看過(guò)渡效果。</p>
<p><b>注意：</b> 過(guò)渡效果需要等待兩秒后才開始。</p>
</body>
</html>

Property	Description	CSS
transition	?? ??, ??? ??? 4?? ?? ??? ???? ? ?????.	3
transition-property	??? ???? CSS ??? ??? ?????.	3
transition-duration	?? ??? ??? ??? ?????. ???? 0???.	3
transition-timing-function	? ?? ??? ?? ??? ?????. ???? "??"???.	3
transition-delay	?? ??? ???? ??? ?????. ???? 0???.

????? ???? ??? ???

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div { width:100px; height:100px; background: #d7ffb5; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } div:hover { width:300px; } </style> </head> <body> <div></div> <p>鼠標(biāo)移動(dòng)到 div 元素上，查看過(guò)渡效果。</p> </body> </html>

?????? ???

????