【訳】レスポンスCSSアニメーション

原文タイトル:Responsive CSS Keyframe Animations原文作者:Joni Trythall原文アドレス:http://designmodo.com/responsive-animation/
作者:@静逸秋水(蒲歓)
 
==============================
 
CSSアニメの好みは自分一人ではないことを知っています.同時に、私と同じようにモバイル開発に熱中している人もたくさんいると思います.しかし、動画サイトを使った楽しい体験は、モバイル端末では止まることが多い.もし私たちの目標が最高のユーザー体験を創造することであれば、私たちはアニメーションがこの方面の体験を豊かにすることを認めて、私たちが使用している設備にかかわらず納品することを確保する必要があります.
移動端がスクリーンサイズに制限されているうえ、私たちの中には親指が大きい人も少なくありません.これはアニメーションを遮る可能性があります.そう考えると、モバイル端末でのアニメ化はちょっとがっかりするような気がします.しかし、モバイル側のユーザーだけが足を止めて見るのではなく、デスクトップアニメーションの作成にすべての注意力を費やすことはできません.そうすると、ユーザー体験の大きな割合が犠牲になります.
 
アニメーションを通じてコミュニケーションを実現することもできます.これらのアニメーションを通じて、簡単な色とサイズを越えて移行することもできます.最終イベントに関連する必要はありません.ユーザーとのコミュニケーションのツールとして面白いアニメーションを使用することができます.ユーザーは、この1つだけを楽しむか、目的を持って鑑賞することができます.私たちが彼らの注意力を得た以上、今私たちは何をしたいですか?
 
モバイル端末、アニメーションは私たちがウェブサイトを建設しているように、私たちはまず携帯電話端末のアニメーションを開発する必要があります.これは私たちに範囲を縮小させ、私たちが表現する意味に集中させます.応答するアニメーションを作成すると、異なるデバイスの制限に適応し、異なるユーザー体験を構築することができます.これらの違いがあっても、アニメーションは同じことを表現しなければなりません.各画面には制限(はい、デスクトップ)があり、応答設計はこれらの制限を克服します.
 
ボタンスケッチとDEMOこれはメッセージについて、限界と楽しみに適応します.このコンセプトを証明するために、コミットボタンのアニメーションを作成します.私たちの移動アニメーションはボタンの境界内を維持します.デスクトップアニメーションはボタンの境界を超え、外のスペースを利用します.まずスケッチを見てみましょう.

 
ボタンスケッチここでは、アクティブ化、コミット、完了の3つの段階のメッセージをユーザーに伝えます.これらのアニメーションを通じて、ユーザーとのコミュニケーションの全過程を完了しました.両者には違いがあるが、伝達は同じ意味だ.私たちの情報は一致していて、私たちの画像のスタイルは一致していますが、今はスクリーンの大きさを気にすることなく、それがもたらす楽しみを理解することができます.
私たちのボタンのデモを見てみましょう(文章の最後を参照)、私たちは潜って(ヘクタール)前の@keyframeに入ります.私たちのボタンには800 pxより小さいスクリーンに適応するアニメーションのセットがあり、800 pxより大きいスクリーンに適応するアニメーションのセットがあります.ブラウザウィンドウを変更すると、異なるアニメーションを表示するためにリセットされます.
 
移動端の@keyframe私たちは「提出」または「処理」の情報を伝え、ボタンをクリックすると水面に現れ、潜水艦を反対側に移動させます.同じテキストもアニメーションによって変わります.「ねえ、クリックしてくれてありがとう.情報を提出しています」とユーザーに伝えます.これを行うには、3つの異なる@keyframeを設定します.

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

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

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

 

 

@keyframe ， ， ， ， “ ” ， 。

 

， ， ， 。 ， ， 。 ， 。 。

， ， ， ， ， ， 。 ， ， ， 。 ， 。

 

， 。 。 ， ， ， ， 。 。 ， 4 。 。 @keyframe。

， ， ， 。 ，

@keyframe。

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

 

， ， @keyframe

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

 アニメーションの で、 は に されますが、アニメーションが すると えます. たちはこれらのやつがずっと することを んでいません.ただ な をします. たちは たちの2 のスパッタリングに して のクラスを して、 に して、それから2 を してあちらのアニメーションの に きます.すると、 たちの「 み」の が され、 した が されます.
 
デスクトップの ここで な は、モバイル のアニメーションを するときのメッセージです. たちはすでに たちのアニメーションを ってコミット の なる を えているので、デスクトップアニメーションもそうする があります. な いは、 をどのように するか、 の をどのように するかです. にプロペラを げてもらい、ユーザーの も すべきだと じています.
 
が しました. たちは2つの なる で じことを えることに しました.メッセージと は なる で を した.このコンセプトは、もちろん、かわいい を することに られません. たちがウェブサイトで した アニメーションは、まずモバイルを する があります. さな からアニメーションを したり、 なる サイズのアニメーションを するかどうかは、メッセージ、ブランド、ユーザーの に します.
たちのアニメーションは で、 たちのすべてのユーザーは 、 のダンスを るためにデータを しています.ただ、このような では のデータがないことを っています.また、CSSアニメーションをコミュニケーション として することに しました. やかで な だけではありません.
このような は らしいと いますか?
 
=============
 
DEMO: http://designmodo.com/demo/cssresponsivebutton/ Download: https://dl.dropboxusercontent.com/u/21385868/designmodo/cssresponsivebutton.zip

： http://www.75team.com/archives/688