CSS3 ?? ?? ?? ??

??:

transition-property：all | none | <property>[ ,<property> ]*

???? ??:
1.all: ??? ? ?? ?? ??? ?????.
2.none: ??? ? ?? ??? ???? ???.
3.<property>: ??? ? ?? ??? ?????.
?? ??:
1. ?? ??? ???? ?? ?? ??? ??? ?????.
2. ?? ???? ??? TransitionProperty???.

transition-property? ??? ?? ? ??? ??? ? ??? ?? ??? ???? ? ?????. ?? ?? ?? ?? ????: none(?? ?? ??); ???? ????(?? ?? ??)???. ?? ???? ??? ?? ??? ?????. all? ???? ??? ?? ?? ??? ? ?? ??? ?????. ident? ??? ?? ?? ?? ??? ? ????. ?? ??? ??? ????.

1. ??: ???, ??? ??, ??, ??? ?? ? ?? CSS ??? ?? ???, ??, ??? ? ??? ?? ??(? ?? ?? ???)? ?? ?????.

2 , ??: ?? ??, ??, ?? ??, ??, ???, ???, ??, ??, ??? ??, ??, ?? ??, ?? ??, ?? ??? ?? ?? ?? ??, ? ??, ??, ??? ??, ??? ??, ?? ?? ? ?? ??

3. ???: ?? ??, ??, ?? ??, ??, ??? ?? ?? ??, ??, ?? ??, ?? ??, ?? ??, ?? ??, ? ??, ??, ?? ?? ? ?? ??

4, ?? ?? ??(??), ?? ????, ??? Floor()? ???? ??? ??? ? ??? ???, Z-?? ?? ?? ??? ?????.

5. ??/??, ????, ?? ??? ?? ??? ??(?? ???) ?, ? ?? ??

6. ?? ??: ??? ??? "CSS3 ??"? ?????.

7. ????: x, y, ?? ? ??(?? ??? ??)? ?? ??: ???

8. ???: 0~1? ?? ?? ??? ?? ??, 0? "???"? ???? 1? ??? "???"? ?????. ?: ???

9 ???: ??, x, y ? ??(??)? ?????. ) ??(?: text-shadow

10) ?????: ? ???? ??? ??? ?????. ?????? ????? ??? ??(??? ?? ??)? ??? ?? ?? ??? ???. ?: background-image

11, ??? ??(SVG): ??????? ????? ? ???? ?? ??? ?????. ??? ???? ??? ?? ?????

12. ???? ??? ? ??: ??? ??? ?? ?? ??? ??? ? ??? ? ??? ?? ????, ??? ??? ?? ?? ????. Change

13. ?? ??: ??? ?? ??? ??????? ?? ? ??? ?? ?? ?? ???? ?????.

?? ??? ?? ? ?? ?? CSS ??? ?????? ?? ??? ?? ? ?? ?? CSS ?? ?? ? ??? W3C ?? ????? ???? ????. ??? ??? ??? ?????. ??? ???? ? ?? ?? ?? ??? ???? ??? ??? ?? ?? ?? ??? ????? ?? ???? ????. ????? ??? ???? ?? ??? ????? ????. ??? ? ?? ??? ?? ??? ???? ?? ?? ??? ??????.

?? ?:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php中文網.com/" /> 
<title>php中文網</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
  transition-property:width;
  -moz-transition-property:width;
  -webkit-transition-property:width;
  -o-transition-property:width;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://ipnx.cn/" /> 
<title>php中文網</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

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

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ipnx.cn/" /> <title>php中文網</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s; -moz-transition-duration:2s; -webkit-transition-duration:2s; -o-transition-duration:2s; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

?????? ???

????