原文標(biāo)題：Responsive CSS Keyframe Animations
原文作者：Joni Trythall
原文地址： http://designmodo.com/responsive-animation/

譯文作者：@靜逸秋水（蒲歡）

?

==============================

?

我知道對(duì)于CSS動(dòng)畫的的喜好并非自己一人。同時(shí)我也認(rèn)為還有諸多人同我一樣熱衷移動(dòng)開(kāi)發(fā)。然而，使用帶有動(dòng)畫網(wǎng)站的愉悅體驗(yàn)往往卻在移動(dòng)端戛然止步。如果我們的目標(biāo)是創(chuàng)造最好的用戶體驗(yàn)，我們承認(rèn)，動(dòng)畫無(wú)疑會(huì)豐富這方面的體驗(yàn)，我們需要確保我們交付不管正在使用的設(shè)備。

由于移動(dòng)端受到屏幕尺寸限制，再加上我們當(dāng)中不少人還有一個(gè)很大的拇指，這很有可能遮擋住動(dòng)畫。這樣一想，似乎會(huì)覺(jué)得在移動(dòng)端實(shí)現(xiàn)動(dòng)畫有些讓人沮喪。但我 們依舊不能把所有的注意力花在創(chuàng)建桌面動(dòng)畫上，而不是僅僅讓移動(dòng)端用戶駐足觀看。而那樣做，將會(huì)犧牲掉很大比例的用戶體驗(yàn)。

?

通過(guò)動(dòng)畫實(shí)現(xiàn)交流
我們也可以通過(guò)這些動(dòng)畫跨越簡(jiǎn)單的顏色和大小過(guò)渡。它并不必須和最終事件相關(guān)。我們可以用有趣的動(dòng)畫作為與用戶溝通的工具。用戶可以僅此一樂(lè)，或者帶有目的性的去觀賞。既然我們已經(jīng)得到了他們的注意力，現(xiàn)在我們想要做些什么？

?

移動(dòng)端，動(dòng)畫第一
就像我們?cè)诮ㄔO(shè)一個(gè)網(wǎng)站，我們首先需要開(kāi)發(fā)手機(jī)端的動(dòng)畫。這迫使我們縮小范圍并專注于我們上面所要表達(dá)的意思。創(chuàng)建響應(yīng)的動(dòng)畫將使我們能夠更好的適應(yīng)不同 設(shè)備的限制，從而構(gòu)建不同的用戶體驗(yàn)。即使存在這些差異，但動(dòng)畫還是不得不表達(dá)同樣的事情。每個(gè)屏幕都為我們提供了限制（是的，甚至是桌面），響應(yīng)式設(shè)計(jì) 將克服這些局限性。

?

按鈕草圖和DEMO
這是關(guān)于消息，適應(yīng)局限以及樂(lè)趣。為了證明這個(gè)理念，我們將會(huì)為一個(gè)提交按鈕創(chuàng)建動(dòng)畫。我們的移動(dòng)動(dòng)畫將保持按鈕的邊界內(nèi)。我們的桌面動(dòng)畫將超出按鈕的邊界，并利用外面的一些空間。先看下草圖吧！

?

按鈕草圖
我們?cè)谶@里向用戶傳達(dá)了三個(gè)階段的消息：激活，提交和完成。通過(guò)這些動(dòng)畫，我們完成了與用戶溝通的整個(gè)過(guò)程。盡管兩者存在區(qū)別，但傳達(dá)卻是同一個(gè)意思。我們的信息是一致的，我們的圖片風(fēng)格是一致的，而現(xiàn)在我們應(yīng)該能夠理解它所帶來(lái)的樂(lè)趣，無(wú)需顧忌屏幕大小。

讓我們來(lái)看看我們的按鈕的演示（見(jiàn)文章最后），我們潛水（公頃）進(jìn)入前的@keyframe。我們的按鈕有一組動(dòng)畫的適應(yīng)于屏幕比800px小的，另一組動(dòng)畫適應(yīng)于比800px大的屏幕。當(dāng)你改變?yōu)g覽器窗口大小時(shí)將重設(shè)，以便展現(xiàn)不同的動(dòng)畫

?

移動(dòng)端的@keyframe
我們?cè)趥鬟_(dá)一個(gè)“提交”或“處理”信息，當(dāng)按鈕點(diǎn)擊后，通過(guò)讓水面出現(xiàn)，然后讓潛艇移動(dòng)到另一側(cè)。同樣文本也會(huì)隨著動(dòng)畫改變。我們會(huì)告訴用戶“嘿，感謝點(diǎn)擊，我們?cè)谔峤荒男畔ⅰ薄?
要做到這一切，我們將設(shè)立三個(gè)不同的@keyframe。

        @keyframes submerge {
to {
transform: translateY(-50px);
}
}

@keyframes drive {
to {
transform: translateX(140px);
}
}

@keyframes sent {
to {
opacity: 1;
}
}
      

        @keyframe。

@keyframes jump {
25% {
transform: translateY(-90px) rotate(-40deg);
}
75% {
transform: translateY(-90px) translateX(150px) rotate(40deg);
}
100% {
transform: translateY(0) translateX(150px);
}
}
      

        @keyframes water-splash {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}