最近打算学习css3知识，觉得css3写出来的效果好炫好酷，之前一直想要学习来着。可能之前的决心，毅力，耐心不够，所以想要重整起来，放下浮躁的心态，一步一个脚印，踏踏实实的来学习。
首先学习的是css3 transition属性，该属性的定义为从一个属性值平滑过渡到另一个属性值。
格式为：transition:<过度属性名> <过度时间> <过度模式>，或
transition-property:<过度属性名>
transition-duration:<过度时间>
transition-timing-function:<过度模式>
注意，由于各浏览器之间的兼容性差异，针对各浏览器写的css3样式都要加上前缀，如：
-webkit-: /*chrome,safari*/
-moz-: /*firebox*/
-ms: /*IE*/
-o-: /*opera*/
如下，举个例子，代码示例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>个人网站首页</title> <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js"></script> <style> .block{ width:400px; height:400px; background-color:blue; -webkit-transition: background-color 3s; } .block:hover{ background-color:red; } .progress-bar{ width: 40px; height: 40px; background-color: blue; } .progress-bar:hover{ width: 960px; } #bar1{ -webkit-transition: width 3s ease; } #bar2{ -webkit-transition: width 3s linear; } #bar3{ -webkit-transition: width 3s ease-in; } #bar4{ -webkit-transition: width 3s ease-out; } #bar5{ -webkit-transition: width 3s ease-in-out; } #expermient{ -webkit-perspective:800px; -webkit-perspective-origin:50% 50%; -webkit-transform-style:preserve-3d; } #blocks{ width: 500px; height: 500px; background-color: blue; margin: 0 auto; -webkit-transform:rotateX(45deg); } .hw-cbg.on p{ padding:0px 0 0 30px; -webkit-transition:padding-left 2s ease; } .hw-cbg p{ padding: 30px 0 0 0; } .animation{ width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @-webkit-keyframes mymove{ 0% {margin-left: 0px;background-color: blue;} 50% {margin-left: 30px;} 100% {margin-left: 60px;} } </style> </head> <body> <!--说明： transition:从一个属性值平滑过渡到另一个属性值，格式为：transition:<过度属性名> <过度时间> <过度模式>，或 transition-property:<过度属性名> transition-duration:<过度时间> transition-timing-function:<过度模式> --> <div class='block'></div> <div class="wrape"> <p>ease</p> <div class="progress-bar" id="bar1"></div> <p>linear</p> <div class="progress-bar" id="bar2"></div> <p>ease-in</p> <div class="progress-bar" id="bar3"></div> <p>ease-out</p> <div class="progress-bar" id="bar4"></div> <p>ease-in-out</p> <div class="progress-bar" id="bar5"></div> </div> <div id='expermient'> <div id="blocks"></div> </div> <div class="hw-cbg"> <p>在节奏紧张的都市生活中，高效便携会让您的生活化繁为简。HUAWEI MateBook配备12英寸屏幕的<br> 金属机身，重量仅为640g，厚度低至6.9mm。内在强大，彰显锐意与品质的交融；<br> 轻薄时尚，是您工作生活的称心伴侣。</p> </div> <script> $(document).ready(function(){ $('.hw-cbg').addClass('on'); }) </script> <div class="animation"></div> </body> </html>