我們為頁面設置動畫時，往往會用到transition還有animation以及transfrom屬性或者用到js。
其實通常情況下，對於使用js我們更加傾向於使用css來設置動畫。
transfrom就不用說了，它本身就一個css屬性。
transition 是可以為一個或者多個用數值表示的CSS屬性發生變化時添加動畫效果。
.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（動畫持續多少秒）、transition-timing-function（動畫的變化過程速度曲線）、transition-delay（動畫開始的時候，也就是延遲多少秒）
相對於animation,transition從某種層度上講，動畫控制的更粗一些，它唯一能定義動畫變化過程效果的便是transition-timing-function屬性，而animation提供的keyframe方法，可以讓你手動去指定每個階段的屬性。此外animation還封裝了循環次數，動畫延遲，反向循環等功能,更加自由和強大。
.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延伸出來的，不管是動態設置的還是非動態設置的過渡效果，只要過渡效果指定的屬性值發生了變化就會觸發過渡效果。
而animation是從flash延伸出來的，使用關鍵幀的概念，如果是非動態設置的，那么頁面加載完后就會觸發動畫效果；如果是動態設置的，那么設置完后（假設沒有設置 delay）就會觸發動畫效果。后面再改變屬性值也不會觸發動畫效果了，除了一種情況（這種情況不會觸發transition定義的過渡效果），就是元素從 display:none 狀態變成非 display:none 狀態時，也會觸發動畫效果。
極端條件下，animation占用的資源相應的比transition多，所以如果能用transition實現，就盡量用transition來實現，如果追求復雜更自由的動畫，就可以用animation。
作者：Yhong_
鏈接：https://www.jianshu.com/p/3befa0f2fa02
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。