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

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

?

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

?

我知道對于CSS動畫的的喜好并非自己一人。同時我也認為還有諸多人同我一樣熱衷移動開發。然而，使用帶有動畫網站的愉悅體驗往往卻在移動端戛然止步。如果我們的目標是創造最好的用戶體驗，我們承認，動畫無疑會豐富這方面的體驗，我們需要確保我們交付不管正在使用的設備。

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

?

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

?

移動端，動畫第一
就像我們在建設一個網站，我們首先需要開發手機端的動畫。這迫使我們縮小范圍并專注于我們上面所要表達的意思。創建響應的動畫將使我們能夠更好的適應不同 設備的限制，從而構建不同的用戶體驗。即使存在這些差異，但動畫還是不得不表達同樣的事情。每個屏幕都為我們提供了限制（是的，甚至是桌面），響應式設計 將克服這些局限性。

?

按鈕草圖和DEMO
這是關于消息，適應局限以及樂趣。為了證明這個理念，我們將會為一個提交按鈕創建動畫。我們的移動動畫將保持按鈕的邊界內。我們的桌面動畫將超出按鈕的邊界，并利用外面的一些空間。先看下草圖吧！

?

按鈕草圖
我們在這里向用戶傳達了三個階段的消息：激活，提交和完成。通過這些動畫，我們完成了與用戶溝通的整個過程。盡管兩者存在區別，但傳達卻是同一個意思。我們的信息是一致的，我們的圖片風格是一致的，而現在我們應該能夠理解它所帶來的樂趣，無需顧忌屏幕大小。

讓我們來看看我們的按鈕的演示（見文章最后），我們潛水（公頃）進入前的@keyframe。我們的按鈕有一組動畫的適應于屏幕比800px小的，另一組動畫適應于比800px大的屏幕。當你改變瀏覽器窗口大小時將重設，以便展現不同的動畫

?

移動端的@keyframe
我們在傳達一個“提交”或“處理”信息，當按鈕點擊后，通過讓水面出現，然后讓潛艇移動到另一側。同樣文本也會隨著動畫改變。我們會告訴用戶“嘿，感謝點擊，我們在提交您的信息”。
要做到這一切，我們將設立三個不同的@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;
}
}