CSS3 ?? ??
W3C ????? CSS3 ??? ??? ?? ?????. "CSS ??? ???? CSS ?? ?? ?? ?? ?? ??? ???? ??? ? ????. ? ??? ???? ???? ???? ??? ? ?? ? ????. ???? ?? ??? ?? ????? ????? ??? CSS ?? ?? ???? ?????. "
css3 ??(CSS Transition) ?????? ?? ???? ????? ??? ???. .CSS ??.
??? ??????
CSS3 ?? ??? ???? ??? ? ???? ?? ??? ??? ? ????. ??? ??? ? ??? ???? ??? ?? ??? ???? ???.
?:
.className{
??: ?? 2s;
-moz-transition: ?? 2s; /* Firefox 4 */
-webkit-transition: ?? 2s /* Safari ? Chrome */
-o-transition: width 2s; /* Opera */
}
??: ????? ?? ??? ???? ??? ???? 0??? ??? ???? ????.
???? ?? ??? ??? ?????.
.className:hover{width:300px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial,"微軟雅黑"; cursor:default;}
.wrap{margin:100px;}
.wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
.wrap:hover{background:#FFC631;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html> ??? ??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style type="text/css">
.box{width:100px;height:100px;background:red;
transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>?? ??
?? ??? ?? ?? ??? ?????? ????.
?????????????????????????????????????????????????????????????????????????????????????????????????> ??? ??? 4?? ?? ??? ???? ? ???? ?? ?? ?????. 3 ? transition-property ??? ???? CSS ??? ??? ?????. 3 ? transition-duration ?? ??? ???? ??? ?????. ???? 0???. 3 ? ?? ??? ??? ?? ??? ?? ??? ?????. ???? "??"???. 3 ? transition-delay ?? ??? ???? ??? ?????. ???? 0???. 3?
