我們?yōu)轫撁嬖O(shè)置動畫時，往往會用到transition還有animation以及transfrom屬性或者用到j(luò)s。
其實通常情況下，對于使用js我們更加傾向于使用css來設(shè)置動畫。
transfrom就不用說了，它本身就一個css屬性。
transition 是可以為一個或者多個用數(shù)值表示的CSS屬性發(fā)生變化時添加動畫效果。
.demo{
overflow: hidden;
width: 100px;
height: 100px;
position: relative;
}
.aaa{ width: 100%; height: 50px;
position: absolute; bottom: -50px; opacity: 0;
-webkit-transition: all 0.85s ease; -moz-transition: all 0.85s ease; -o-transition: all 0.85s ease; -ms-transition: all 0.85s ease; transition: all 0.85s ease; }
.demo:hover .aaa{
opacity: 1;
bottom: 0;
}
transition的屬性有transition-property（css屬性name，transition效果）、transition-duration（動畫持續(xù)多少秒）、transition-timing-function（動畫的變化過程速度曲線）、transition-delay（動畫開始的時候，也就是延遲多少秒）
相對于animation,transition從某種層度上講，動畫控制的更粗一些，它唯一能定義動畫變化過程效果的便是transition-timing-function屬性，而animation提供的keyframe方法，可以讓你手動去指定每個階段的屬性。此外animation還封裝了循環(huán)次數(shù)，動畫延遲，反向循環(huán)等功能,更加自由和強(qiáng)大。
.animation:before, .animation:after{
content:'';
width: 50%;
height: 100%;?
animation: mymove 3s ease-in-out alternate infinite; -moz-animation: mymove 3s ease-in-out alternate infinite; -webkit-animation: mymove 3s ease-in-out alternate infinite; -o-animation: mymove 3s ease-in-out alternate infinite;
}?
@keyframes mymove {
from { width: 50%; }
to { width: 0%; }
}
這里就不貼出keyframes瀏覽器適配了。
同時還可以這樣想，transition是從：hover延伸出來的，不管是動態(tài)設(shè)置的還是非動態(tài)設(shè)置的過渡效果，只要過渡效果指定的屬性值發(fā)生了變化就會觸發(fā)過渡效果。
而animation是從flash延伸出來的，使用關(guān)鍵幀的概念，如果是非動態(tài)設(shè)置的，那么頁面加載完后就會觸發(fā)動畫效果；如果是動態(tài)設(shè)置的，那么設(shè)置完后（假設(shè)沒有設(shè)置 delay）就會觸發(fā)動畫效果。后面再改變屬性值也不會觸發(fā)動畫效果了，除了一種情況（這種情況不會觸發(fā)transition定義的過渡效果），就是元素從 display:none 狀態(tài)變成非 display:none 狀態(tài)時，也會觸發(fā)動畫效果。
極端條件下，animation占用的資源相應(yīng)的比transition多，所以如果能用transition實現(xiàn)，就盡量用transition來實現(xiàn)，如果追求復(fù)雜更自由的動畫，就可以用animation。
