最近打算学习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>