【译】响应式CSS动画

原文标题：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;
}
}