過渡、動畫和變換是CSS3中新添加的3個特性，通過JavaScript操作CSS3是直接由瀏覽器引擎處理的，雖然能節省開銷，但是，會耗費大量的處理能力，把用戶的電腦搞得越來越慢，最後死機。
過渡：
過渡就是網頁上一個元素從一個狀態慢慢變到另一個狀態。比如：鼠標移動到關鍵字上，關鍵字變大，閃爍之類的，，，狀態可以任意發揮了，所以，可以創造出很多炫彩的效果，期待吧。廢話不多說，入正題咯
先看一個效果，我對文字和圖片都做了過渡：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
#main{
margin:0; padding: 0;
background-color: #A19393;
padding:0 auto;
}
.text{
color: white;
font-size: x-large ;
}
.text:hover{
font-size: 30px;
padding: 4px;
background-color: #F5AD3D;
}
h2{
text-align: center;
}
h2:hover{
color;red;
background-color: #F5AD3D;
padding: 4px;
/*border: thin solid black ;*/
}
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div id="main">
<p>
<h2 >分享健身成果,一起進步</h3>
<span class="text">圖片分享，見證每一個人的蛻變。結識同樣熱愛運動的朋友，讓健身不再是孤獨的堅持。</span>
</p>
<p class="image">
<img src="E:\新建文件夾\images\f3.jpg" alt="騎單車">
</p>
<p>
<span class="text">每一個腳印，都是對自己的肯定,你不孤單。</span>
</p>
</div>
</body>
</html>主要是利用 :hover 選擇器，給. text 類和img 加上當鼠標滑過的時候，文字放大，加上背景顏色，照片模糊。
欣賞了效果，但感覺美中不足的是，效果太突兀了有木有，但是通過設置transition的屬性可以平緩的過渡了。
加上transition-delay transition-duration 等等之後，效果就不那麼突兀，自然平緩的過渡到想要的結果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
#main{
margin:0; padding: 0;
background-color: #A19393;
padding:0 auto;
}
.text{
color: white;
font-size: x-large ;
tranasition-delay: 100ms;
transition-duration: 250ms;
}
.text:hover{
font-size: 30px;
padding: 4px;
background-color: #F5AD3D;
transition-delay: 100ms;
transition-property: font-size,padding,background-color;
transition-duration: 500ms;
transition-timing-function: linear;
}
h2{
text-align: center;
tranasition-delay: 100ms;
transition-duration: 250ms;
}
h2:hover{
color:red;
background-color: #F5AD3D;
padding: 4px;
/*border: thin solid black ;*/
transition-delay: 100ms;
transition-duration: 500ms;
transition-property: all;
transition-timing-function: ease-in-out;
}
img{
tranasition-delay: 100ms;
transition-duration: 250ms;
}
img:hover {
opacity: 0.5;
transition-delay: 100ms;
transition-duration: 500ms;
transition-property: all;
}
</style>
</head>
<body>
<div id="main">
<p>
<h2 >分享健身成果,一起進步</h3>
<span class="text">圖片分享，見證每一個人的蛻變。結識同樣熱愛運動的朋友，讓健身不再是孤獨的堅持。</span>
</p>
<p class="image">
<img src="E:\新建文件夾\images\f3.jpg" alt="騎單車">
</p>
<p>
<span class="text">每一個腳印，都是對自己的肯定,你不孤單。</span>
</p>
</div>
</body>
</html>雖然改動不大，但是給用戶的感覺絕對比不用好，還有，爲了更加自然，鼠標移開之後，元素也得緩慢的變回去，所以得用反向過渡，如：
.text{
color: white;
font-size: x-large ;
tranasition-delay: 100ms;/*反向過渡*/
transition-duration: 250ms;
}transiton-property 的意思是給什麼屬性應用過渡，比如給字體字號使用就寫font-zize.背景顏色就使用 backgroundcolor.......，只需要寫屬性，或者簡單一點，all 代表全部屬性。
transition-timing-function 的意思是計算初始值和最終只之間的中間值，表示爲4個點的三次貝塞爾曲線（貝塞爾曲線後面再寫），不懂可以挨着試試，反正就5個。。