transition屬性是一個很強大的3d動畫屬性，我動手試了一下，很多在網上很火的網頁動畫都可以用這個屬性實現，只能說這個屬性實在是太強大啦，本人在學習次屬性之後才知道自己對css3的認識還是偏少，現在我給大家介紹並實際實現下該屬性。
transition字面意思是變遷、變換、過度的意思，所以transition屬性也離不開這個大致意思，其中該屬性中的重要屬性是：
transition-property:指定過度的元素; 如：transition-property:background,就是指background屬性參與這個過度。
transition-duration：指定這個過度持續時間;
transition-delsy:延遲過度時間;
transition-timing-function:指定時間過度類型; 如：ease\linear\ease-in\ease-out\ease-in-out\ 其中：ease是越來越慢，linear是勻速 運動，ease-in是先慢後快，ease-out是先快後慢，ease-in-out是先慢後快再慢
transition：all 0.3 ease; 其中all是指全部屬性參與，0.3是過度時間，ease是過度類型；
現在應該對這個屬性有了個基本的了解，其實知道了上述屬性，我們就可以動手做一些頁面上的動畫效果
.divt{
text-align: center;
padding-top: 150px;
margin-top: 30px;
margin-bottom: 30px;
}
.divimg{
text-align: center;
}
.imgts{
width: 175px;
height:175px;
background-color: white;
border: 2px solid blue;
margin-top: 50px;
margin-left: 50px;
text-align: center;
display: block;
transform:rotate(10deg);
transition:all 0.5s ease-in;
box-shadow: 2px 2px 4px #9932CC;
padding: 5px;
margin: auto;
}
.imgts:hover{
transform:rotate(0deg) scale(1.05);
box-shadow: 15px 15px 21px blue;
}
.divimg1{
width: 200px;
height: 40px;
background-color: pink;
transition-property: background-color;
transition-duration: 0.01s;
transition-timing-function: ease;
}
.divimg1:hover{
background-color: yellowgreen;
}
上述代碼實現了鼠標懸停圖片旋轉和鼠標懸停改變顏色的功能，這個是不是很好用。