ルール、そして開始時と終了時のスタイルを定義するキーフレーム。アニメーションの速度やディレイなどをカスタマイズするための宣言を追加することもできます。要素がアニメーション対象です。要素にバインドされています。その下に、アニメーションのタイミングやふるまいを制御する追加の宣言があります。ルールで定義したキーフレームによって作られます。キーフレームは、アニメーションの開始状態(from{})と終了状態(to{})を定義します。3つのスタイルプロパティを変化させています。これらのプロパティが同時にアニメーション化されることで、一貫性のあるアニメーションが生み出されます。この例では1つのキーフレームしか使っていませんが、複数の種類のアニメーションがある場合は、それぞれ別のキーフレームを定義することができます。アニメーションの事例を紹介します。これらの事例は、コードペン(HTML/CSSのコードスニペットを作成・共有できるウェブサイト)から集めたものです。創造性を刺激したい場合は、コードペンはきっと良いヒントを与えてくれるはずです。上で説明したような伝統的なキーフレームアプローチを使った事例から見ていきましょう。これらの事例は一般的に、自分のプロジェクトに応用しやすい例です。アニメーションを使えば、みなさんおなじみのような効果を作ることができます。この回転するロードアイコンがその一例です。この意味合いはほぼ全世界的に理解されており、コードも軽量です。この特定の例では、スケーラブルなベクターグラフィックを使って同様の効果を実現する方法も示されています。シンプルなCSSローダーここでは、スムーズで洗練された複数のローディングアニメーションを紹介します。あなたのお気に入りのものを選んでみてください。実践のために解析すると良い例です。各トランジションがアニメーションのキーフレームの中で異なるタイミングで適用されていることに注目してください。スクロールテキストアニメーションテキストを魅力的に見せるもう1つのクールな方法として、スロットマシーンのような効果でテキストを画面に表示したり隠したりするアニメーションがあります。効率的、ユーザーフレンドリー、持続可能など、ウェブサイトで製品の多様性を伝えたい場合にはこのようなアニメーションが役立ちます。アニメーションつきSubmitボタン洗練されたデザイナーがウェブページ全体に仕込んでいる、小さな予期せぬ喜びの瞬間が好きです。このSubmitボタンは、フォームの送信などのアクションが完了したことを視覚的にフィードバックする、きれいで心地よい方法です。ホットコーヒーシンプルで洗練されたアニメーションでも、大きな効果を生み出せます。アニメーションで適用することで、基本的なイラストに生気を与えています。コーヒーマシンHubSpotブログではコーヒーが大好きなので、もう1つコーヒー関連のサンプルを紹介します。この場合、アニメーションが注目を引くことはありません。周りの設計を強化することで、要素全体がより没入感のあるものになっています。ユーザーが気付くかもしれませんし、気付かないかもしれませんが、確実に評価されるものです。カラーフラッシュやモーダルの代わりに、このようなユーモアあふれるウィグル効果をボタンに追加するのも良いでしょう。この効果は注意を引くことができますが、侵略的ではなく、ユーザーのフローを大きく乱すこともありません。遊び心のあるフレンドリーな印象を与えています。パックマン著作権の問題があるため、このデモをウェブサイトに置くことは推奨しませんが、見ていて楽しいです。アニメーションを使ったローディング効果の例です。スケールの変化だけで、"しばらくお待ちください"というメッセージを伝えることができます。終わりのないボックスシーシュポスを想起させるこのアニメーションでは、ボックスが斜面を絶え間なく登っては落ちていきます。ローディングアニメーションとして使えそうですね。ボックスが斜面の向こう側に倒れ込むところで終わるとサティスファクションがあるかもしれません。カラーファンこの次の例は、デザイン重視のビジネスウェブサイトに特に適しています。カラーパレットをアニメーション化して扇状に広がる効果を演出し、単純な色付き四角とは違うものを作りましょう。砂糖キューブの上のアリもしあなたが虫が苦手なら、このサンプルは見逸してもらって構いません。左、底部、変形プロパティでアニメーションを巧みに実装した、面白い例です。キーフレームはすべて、各"アリ"SVG要素の位置を変更しているだけです。3DトグルスイッチトグルスイッチはUIデザインの定番ですが、この例では3次元的な仕組みを導入し、切り替え時のスムーズなアニメーションも加わっています。ここでは開発者がCSSチェックボックス入力要素を、より面白いものに改変しています。潜水艦CSSは平面的で色鮮やかなイラストやアニメーションに適しています。以下のコードでは、愛らしい潜水艦を描くために、いくつかの効果を組み合わせています。私の提案としては、ビートルズのイメージにあわせてこれを黄色にするのはどうでしょうか。Headersこの例では、タイトルテキストにダイナミズムを加えるさまざまな方法を探っています。2つのキーフレームでも、見出しを引き立たせることができるのがわかります。アニメーションの組み合わせが気に入っています。シンプルなデザインながら、CSSの変形プロパティだけでキャラクターを感じさせています。アニメーションは、データビジュアライゼーションにアクセントを付けるのに役立ちます。この例では、色の変化と速度の変化によって、動的なバーグラフに異なる雰囲気を生み出しています。アニメーションを使えば、アニメーションの速度や繰り返し回数を自由に変更できます。ねじれ四角形この見た目シンプルな例は、錯覚を生み出す効果を生み出しています。ページ上のすべての四角形divに同じ回転効果が適用されていますが、サイズの違いによって回転速度が異なるため、不思議な錯覚が生まれます。レーザータグこのリストの中でも最も複雑な例の1つですが、短い間注意を引きつける魅力的なローディング表示になっています。ろうそくCSSアニメーションが物語を伝えられることを示す素晴らしい例です。これを実現するにはかなりの練習が必要ですが、初めてサイトを訪れた人の目を引くことでしょう。Truck"は、パララックスを巧みに使ってトラックが自然の風景を走り抜けるように表現しています。外見はシンプルですが、変形プロパティの創造的な使い方によって、道の凹凸まで表現されています。スノーグローブ見つけた中で最も居心地の良い例です。このスノーグローブのアニメーションは、静止画では得られない雰囲気をページに加えてくれます。雪が"ガラスの"グローブの内部でのみアニメーションされているのがわかります。次のいくつかの例では、キーフレームを使わずに(あるいは最小限しか使わずに)、他のより複雑な技術を活用してアニメーション効果を実現しています。浮遊するイメージ"浮遊"効果は、微妙で単純ながら効果的なアニメーションの使い方です。ここでは、アイコンを表示するのに使われていますが、素晴らしい結果が得られています。CSSマウスホバーのトランジション効果このアニメーションは、マウスオーバーによってトリガーされるシンプルながら効果的なテキストハイライト効果を示しています。ページ上のリンクにスタイルを加える良い方法だと思います。マウスホバーによってサブトルなアニメーションが適用されています。ナビゲーションをより楽しい体験にしてくれる、もう1つの視覚的なヒントです。回転テキストこのサンプルはJavaScriptを使っているので、少し"不正"かもしれません。ホームページで使われていたらどうでしょうか。トランジションがとてもスムーズで、使用する効果をカスタマイズできるのが魅力です。開くエンベロープお気に入りの例の1つです。この優雅なアニメーションは細部にまでこだわっています。エンベロープが下に下がる動き、紙の細部、影まで、小さな工夫が積み重なって滑らかで一貫性のあるアニメーションを生み出しています。ボタンやスクロールアニメーションに最適でしょう。書類ケースメニューを活気づけるには、このようなピュアなCSSの書類ケースのようなものを検討するのもいいでしょう。ホバーすると引き出しがわずかに開くので、主要なナビゲーションが他と際立って見えます。宇宙飛行士こちらもフローティング効果と、フレンドリーな宇宙イラストの組み合わせが素晴らしい例です。アニメーション効果です。アニメーションでも、ユーザーにとってより没入感のある体験を作り出すことができます。最高のアニメーションは、コンテンツやユーザー体験を妨げず、ギミック的にも見えないものです。上記の全てのサンプルはこのバランスを見事に保っています。Tower"の例を紹介せずにはいられません。この例は、おそらくこの記事の範疇を超えるほど複雑ですが、CSSとHTMLだけで実現できる力強さを物語っています。プロフィールをチェックし、自分のアイデアを練り始めましょう。記事は上記記事を意訳したものです。記事は上記記事を意訳したものです。10:30Webクリエイターのコハムです。地味な事務職からWeb制作会社に転職してフリーランスになりました。キンクマハムスターと2人暮らし。3©コハム引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。