現在開個css3特效分類，目的很簡單，掌握它的常用屬性與技巧。
今天是2017-3-30 明年今天在回首，希望我已經成爲一名優良的web前端工程師。
transition：屬性 國度時間 時間函數 延遲時間
過渡效果需要IE10以上才能很好支持，不過現在css3基本上都流行使用在移動端，就沒有IE什麼事情了。過渡效果能夠很好的平滑過渡運動，常見使用場景，鼠標經過:hover 物體@keyframes規則配合使用，當然也有漸變透明色，顯示幻燈片效果，配合transform使用
鼠標經過改變width纔有平滑過渡效果屬性值爲width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3風車轉動</title>
<style type="text/css">
/*鼠標經過並且width值發生改變時候採用平滑過渡效果*/
.transition{width: 100px;height: 100px;background: red;-webkit-transition:width 2s ease-out;-moz-transition: width 2s ease-out;-o-transition:width 2s ease-out;transition:width 2s ease-out; }
.transition:hover{width: 500px;}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3風車轉動</title>
<style type="text/css">
/*鼠標經過並且width值發生改變時候採用平滑過渡效果*/
.transition{width: 100px;height: 100px;background: red;-webkit-transition:All 2s ease-out;-moz-transition: All 2s ease-out;-o-transition:All 2s ease-out;transition:All 2s ease-out; }
.transition:hover{background:#000;}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>配合transform的rotateY轉動屬性，產生3d轉動180度，顏色過渡，透明度過渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3風車轉動</title>
<style type="text/css">
/*鼠標經過並且width值發生改變時候採用平滑過渡效果*/
.transition{width: 100px;height: 100px;background: red;-webkit-transition:All 2s ease-out;-moz-transition: All 2s ease-out;-o-transition:All 2s ease-out;transition:All 2s ease-out;
}
.transition:hover{background:#000;-webkit-transform: rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);opacity: 0.3;}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3風車轉動</title>
<style type="text/css">
/*鼠標經過並且width值發生改變時候採用平滑過渡效果*/
.transition{width: 100px;height: 100px;background: red;-webkit-transition:All 2s ease-out;-moz-transition: All 2s ease-out;-o-transition:All 2s ease-out;transition:All 2s ease-out;
}
.transition:hover{background:#000;-webkit-transform: rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);opacity: 0.3;
animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite;-o-animation:mymove 5s infinite; position: relative;width: 500px;}
/*@keyframes規則*/
@keyframes mymove{
from{
top:0;
}
to{
top:200px;
}
}
</style>
</head>
<body>
<div class="transition"></div>
</body>
</html>