CSS的Animation是一個(gè)很有意思的東西碍脏，也是CSS中較為復(fù)雜也難設(shè)計(jì)的一部分窃蹋。熟不知在Web的動(dòng)畫設(shè)計(jì)中有12個(gè)關(guān)鍵原則准潭。在Animation 101將這十二原則剖析出來(lái)。今天特意轉(zhuǎn)載@劉英滕翻譯《Animation Principles for the Web》的中文腔丧。
作為前端的設(shè)計(jì)師和工程師放椰，我們用 CSS 去做樣式作烟、定位并創(chuàng)建出好看的網(wǎng)站。我們經(jīng)常用 CSS 去添加頁(yè)面的運(yùn)動(dòng)過渡效果甚至動(dòng)畫砾医，但我們經(jīng)常做的東西不會(huì)超過這些拿撩。
動(dòng)效是一個(gè)有助于訪客和消費(fèi)者理解我們?cè)O(shè)計(jì)的強(qiáng)有力工具。這里有些原則能最大限度地應(yīng)用在我們的工作中如蚜。
迪士尼經(jīng)過基礎(chǔ)工作練習(xí)的長(zhǎng)時(shí)間累積压恒，在 1981 年出版的 The Illusion of Life: Disney Animation 一書中發(fā)表了動(dòng)畫的十二個(gè)原則 (12 Principles of Animation) 。這些原則描述了動(dòng)畫能怎樣用于讓觀眾相信自己沉浸在現(xiàn)實(shí)世界中错邦。
在本文中探赫，我會(huì)逐個(gè)介紹這十二個(gè)原則，并討論它們?cè)鯓舆\(yùn)用在網(wǎng)頁(yè)中兴猩。你能在 Codepen 找到它們全部的開源 HTML 和 CSS 代碼期吓。
