如何向前端表達想要的動畫效果？

制作AE動效視頻

設計師是最清楚關鍵幀的分配情況的，給他一個AE動效演示視頻，是最能表現設計師想法的。熟悉了軟件，制作起來也是非常快的。能夠大致還原就可以了，交代清楚：動畫過渡是線性放大，還是先快后慢，或者先慢后快。比如你可以用AE預先用AE做出這樣的GIF圖片或視頻。

案例1

案例2（平面設計學習日記網-書籍頁面）

設計師要懂點前端代碼——動效代碼

我也是學過前端開發的設計師，其實一般的web前端動效，都可以用CSS3中的transition屬性來控制，transition英譯過來就是：過渡、轉變的意思。transition屬性對應的值有四個：

transition-property，規定設置過渡效果的 CSS 屬性的名稱。transition-duration，規定完成過渡效果需要多少秒或毫秒。transition-timing-function，規定速度效果的速度曲線。transition-delay，定義過渡效果何時開始。動效代碼解析

在上述案例2中，我們把鼠標移動到書籍方面上，底部會彈出一個紅色的購買按鈕，這就是紅色按鈕的屬性發生了變化。其中最為關鍵的代碼，就是紅色按鈕，距離整個書籍方盒子的頂部距離發生了變化。

top: 300px;（前，狀態1)top: 235px;（后，狀態2）控制這兩者狀態由1變為2代碼：transition: all 0.2s ease;

所以，知曉了上訴情況，和前端工程師幾乎一點就通，絕對不會有任何障礙，即使有問題我們還可以通過第一步中的AE動效演示，給其完美示范。

當然，最好的網頁設計師，是需要懂一點前端代碼（掌握html、css即可）的，這能為你們的工作銜接、溝通提供更大的便利，這就像每個前端工程師需要學習PS軟件掌握切圖技能一樣。