作者：@wnagly19，本文已授權掘金開發者社區公眾號獨家使用，包括但不限於編輯、標註原創等權益。
❞🎈 簡介在使用手機時，都會或多或少都會接觸到 過渡動畫 的使用場景。從最基本的頁面切換到一個按鈕的點擊後的常態都是動畫的應用場景。這些動畫無時無刻不在 優化 （欺騙）著我們的大腦，加強我們對一件事情的認知度。不同情況下不同的動畫操作能夠無形中引導用戶進行接下來的行為。並給人腦一定反應的交互時間。
在我們的日常開發中， 過渡動畫 扮演的角色非常的巧妙。大部分前端其實並不是很懂 過渡動畫 之間的 交互協調 概念，在沒有 互動設計師 的基礎上，只能通過大腦的直觀印象給出一個動畫大概的執行時間和線性速度，但這往往因為個人感官的偏差導致 動效價值 的流失。
🪁 動效價值那麼我們從 Ant Motion 的動效價值來看下，為什麼做動畫？
它們認為，動效的價值應該是這樣的：
**增加界面活力：**第一時間吸引注意力，突出重點。
**描述層級關係：**體現元素之間的層級與空間關係。
人都會有獵奇性，人們往往願意接受一些大膽的創新，在確保不會對人腦產生障礙的情況下，好的 過渡動畫 對用戶來說是最直接體驗產品的感官，相比於沒有動畫的產品來說，兩者可謂是失之毫釐，差之千裡。
可以嘗試對手機的動畫進行關閉和開啟分別使用一短時間，就能有直接的感官了。
❝動效的體驗須是流暢的，在不影響體驗性能的前提下才能更好的體驗價值，大量使用無意義動畫導致產品卡頓實則是一個敗筆。(三流產品的基本操作)
❞⚡CSS中的動畫世界在 CSS 中我們看過很多不可思議的操作，其實都來自於動畫的 欺詐 效果。所以，我們應該認真的看看 Transition 和 Animation 是如何完成一些神奇的吧。
動畫周期動畫周期是動畫的核心點，它根據 時間 和 貝塞爾曲線(cubic-bezier) 的特徵進行對應組合，產生視覺上的效果。
同樣的，時間和線性動畫都是動畫中設計的難點，在大多數時候，動畫應該更加高效的完成。可以看下 螞蟻Ant Design 對動畫提出的建議。
❝在企業級應用的設計中，動效需要在儘可能短的時間內有效的完成過渡。那麼如何把握這個時間的長短呢？倫敦城市學院神經學創立者 Davina Bristow 曾提出， 眨眼是人體最快的潛意識動作，大多數人每分鐘眨眼 15 次，眨眼平均持續 100-150 毫秒；所以我們將這個時間段定義成 Ant Design 動效的基本時間單位。
❞下面幾張圖分別是 transition 默認的一些 貝塞爾曲線 動畫展示。
(效果圖來自Google瀏覽器Cubic Bezier Editor)
速度與激情在 Ant-Design 中，它的設計對其把控的效果拿捏是具有深思熟慮的，細緻的拿捏會讓動畫呈現起來恰到好處，我們不妨來看看這張圖吧：
Ant-Design 組件裡的基本時間單位分別是：最快時間: 100ms , 基本時間: 200ms , 較大時間：300ms ... 100 的倍增的方式，那麼基於此，我對比了其他UI組件庫，總結出了一些動畫較為合理的時間把控程度。我也在這裡分享下吧。
$animation-time-fast: .1s;
$animation-time-base: .2s;
$animation-time-even: .3s;
$animation-time-slow: .4s;
$animation-time-cut: .7s;
🚞 方塊的一生在網頁中，有我們熟知的盒模型，所有的頁面都是由大大小小的盒子拼湊而成。如下圖，就是一個基本的盒子模型。
因此，對於動畫來說，最直觀的就是對於方塊運用的一些交互行為。而我們又可以將其分為幾類不同的交互：
**單元素動畫動畫：**該動畫在整個頁面中獨立的觸發，稱之為單元素動畫。**交互動畫：**涉及到多個元素之間可能發生序列的動畫，稱之為交互動畫。**轉場動畫：**頁面與頁面之間的切換，稱之為轉場動畫。呈現方式在 CSS 中，對於動畫的產生有兩個 API ， transition ， animation 都可能定義過渡動畫。但是兩者的區別是很大的。transition 只能聲明元素變化從開始到結束之間的變化關係。而 animation 則是可以自由的定義一段動畫在元素上的開始和結束。甚至於，還能控制動畫的執行次數。
單點元素我們先來看一個單元素(單點)動畫：
這是我們常見的一個聲波信號的一個圖片，我們實現起來非常的簡單，
.dot {
position: relative;
width: 1em;
height: 1em;
border-radius: 50%;
background: #1890ff;
&::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: inherit;
border-radius: inherit;
// animation: scale 2s ease-out infinite;
transition: all 1s;
}
&:hover::before {
transform: scale(3);
}這個時候，其實我們已經很明顯的發現了 transition 的弊端了，它並不能自由的控制元素的形變，所有的形變都是預先設置在元素上的，而 animation 則是可以自由的組織元素發生變化的內容和次數，而不完全依賴於用戶觸發。
❝需要注意的是，如果元素從文檔流直接消失，那麼CSS動畫和過渡屬性就對其沒有效果了。如：display
❞可以看的出， transition 的存在更多是為元素 過渡行為 而使用的，當元素發生過渡行為的時候，較為簡單的動畫，我們並不需要使用 animation 進行控制。因此，可以總結出：
「transition」：強調的是單一動畫屬性的過渡效果，由開始到結束的過程，中間不存在動畫轉折。「animation」：強調的是多種動畫屬性的結合，能夠有效的排列動畫執行時間的 某時做某事 ，從開始到結束的過程可以是簡單，也可以是複雜。算是 transition 的加強版。「交互動畫」在 web 頁面中，我們往往涉及到很多的交互動畫，我們可能會涉及到部分動畫的穿插，那麼這個時候就需要對動畫元素進行一部分的延遲操作了。
❝需要注意的是 animation-delay 元素依舊會顯示，下圖只是做一個基本的演示，完整效果可以看另一篇文章寫的案例，是完全通過延遲 DOM 來實現的。
❞對比兩者 DEMO ，左側的是使用Vue鉤子添加 setTimeout 分批去控制動畫的行為，右邊則是使用 animation-delay 設置了基礎延遲時間，可以看到，動畫只是做了延遲，但是DOM還是加載了，很明顯會有瑕疵。
示例動畫來自@ mmdjj：優美的v-for列表加載動畫：vue動畫鉤子實踐
⭐使用動畫誠然， Vue 提供了 transition-group 和 transition 組件，能夠很好的控制一張卡片的一生，從進入到離開但是在動畫的行為上，還是寫成了一個 animation.scss 作為基本動畫的管理，具體可以根據當前需要的動畫，拼湊成為對應的 動畫類 。
在寫動畫類的時候，我們需要注意的是，一個動畫如無意外，肯定是雙向的，比如最耳熟能詳的淡入淡出。淡入和淡出其實就是 開始 和 結束 相反的一個過程。
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}多數時候，我們只需要進行在class中進行 類 的引用就可以使用了，如果是 vue.js 需要使用 transition 組件的話可以自己拼湊出一個動畫狀態類進行綁定。
list-5.gif🍻動畫分享和閱讀資源下面來分享標題的動畫資源吧，不拿出點資源估計今天很難走出掘金了。首先是一些推薦的作者寫的文章，非常的棒，看完概念篇再去看實踐，直接起飛。
@mmdjj：優美的v-for列表加載動畫：vue動畫鉤子實踐下面是我個人覺得比較好的動畫資源，寫成了一個 scss 文件給大家了，獨樂樂不如眾樂樂。
❝動畫樣式下載地址：立即下載
❞總結本片文章算是我對過渡動畫體系的一個小總結，看起來很簡單的過渡動畫，難的不是 API 而是設計動畫的過程，在一個團隊中， 設計 和 交互 對於前端的體驗也是重中之重，我們在開發的時候，對於其他領域的知識應該保持學習的態度。同樣的，對於部分複雜的動畫，如無必要也需要和互動設計進行溝通，好的動畫可以給人眼前一亮的視覺體驗，拖沓的動畫也同樣會讓人疲勞。看完文章後，不妨在自己項目中去實踐實踐吧。