TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選
icon
icon
CSS

【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選

初心者向けにCSSで書けるアニメーションをまとめたサイトや記事を厳選して紹介しています。Webサイトの制作において重要なアニメーションですが、すぐ使えるサンプルをまとめているので、ぜひ参考にしてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

今回はCSSのアニメーションをまとめたサイトや記事を紹介します。

サイトを作っていく上でアニメーションの実装は必須と言えるでしょう。より目立たせたり、クールな印象を持ってもらうためにアニメーションの書き方を覚えておくとサイトの表現に幅が出るはずです。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

CSSアニメーションの素晴らしいアイデアのまとめ

css_13_01

このサイトはデモページもセットであるために1ページでいくつかのデモを見ることができます。

上記のゲームボーイカラーの生成HTML、CSSなど真似したくなるアニメーションが多くあります・。

他にも動的なコンテンツが多くあるので必見のサイトでしょう。

CSSアニメーションの素晴らしいアイデアのまとめ

 

Hover.css

css_13_02

アニメーションの実装でまず参考にしたいサイトの代表例ですね。

マウスオーバー時に関するアニメーションについては、このサイトを見れば十分表現ができるでしょう。書き方もすべてまとまっているので、初心者の方でも気軽に使用できるはずです。

Hover.css

 

[PR] Webデザインで副業する学習方法を動画で公開中

CSS3アニメーションをらく～に実装！オンラインツール7選

このサイトでは実装結果が分かった状態で、使いたいものを選ぶことができます。アニメーションを再現できる便利ツールをまとめているので、表現したいアニメーションが見つかるはずです。

CSS3アニメーションをらく～に実装！オンラインツール7選

 

 ここまで動かせる！楽しいcss アニメーションのサンプル集

ここには動くサンプルが多く乗っています。

文字が奥にスクロールするものは実行してみたくなりますね。

ここまで動かせる！楽しいcss アニメーションのサンプル集

 

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！

ここに乗っているサンプルは、オリジナルを作る際に参考になると思います。シンプルなアニメーションから3Dを用いた難易度の高いものも紹介されているので、ぜひ試してみましょう。

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！

 

CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）

上記にあげたようにオリジナルを作るための基礎になります。サイト内のアニメーションの動きとソースコードの書き方がどちらも載っているので、CSSでアニメーションを書いたことがないという人でも記載されているコードをペーストするところから始められるでしょう。

CSS3でアニメーション！transitionとanimationまとめ

 

1時間でできる無料体験！

 初心者にもコピペで使えるCSSジェネレーター8個

紹介されているのはCSSジェネレータで、コピーして使えるという点が優れています。それぞれのアニメーションがGIFで紹介されているので、サイト上でどんな動きをするのか一目で確認することができるでしょう。

初心者にもコピペで使えるCSSジェネレーター8個

 

CSSのみでエフェクト・アニメーションを実装する方法

ここではいろいろなCSSアニメーションの書き方が書いてあります。アニメーションを実装したことがないという人は、この記事で書き方を見ておくと良いでしょう。

CSSのみでエフェクト・アニメーションを実装する方法

 

 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト

ここではCSSのボタンがメインで紹介されています。

ボタンはマウスオーバーした時にアニメーションを施すWebサイトが多いですが、サイト制作をする上で役に立つでしょう。

css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト

 

 【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ

ここではCSS3のライブラリのまとめが乗っています。

ライブラリとして導入する場合には見ておくとよいでしょう。

【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ

 

【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！

 

CSS3でアニメーションを作る際の細かな調整方法などが紹介されています。

動きにこだわったサイトを作る際、活用できそうですね。

【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！

 

CSSアニメーション 入門

 

CSSを使ったアニメーションについて、分かりやすくまとめられています。

デモも確認できるので、リファレンスとしても活用できますね。

CSSアニメーション 入門

 

担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる

ここではCSSを使ったアニメーションについて、プロの技を見ることができます。

全てを理解することは難しいかもしれませんが、いろんなテクニックが紹介されており、参考になりますね。

担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる

 

最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ

CSS3を使った、特に視覚効果の高いアニメーションが紹介されています。

インクが広がるエフェクト等、CSSでここまでできるんだと思うようなものばかりです。

最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ

 

【CSS】最新マウスオーバーアニメーションスニペットサイト６選。

マウスオーバーアニメーションに特化したアニメーションが紹介されています。

スニペットを貼り付けるだけで利用できるので、自分のサイトに簡単に取り入れることができますね。

【CSS】最新マウスオーバーアニメーションスニペットサイト６選。

 

CSSでのロールオーバーアニメーションのチュートリアル集まとめ

ここではCSS3を使ったロールオーバーアニメーションが紹介されています。

チュートリアルの紹介なので、初学者にも分かりやすく確認することができます。

CSSでのロールオーバーアニメーションのチュートリアル集まとめ

 

コピペで使えるアニメーションcss集

比較的シンプルなアニメーションがコード付きで紹介されています。

コピペで使えるアニメーションcss集

 

コピペで簡単！ローディングアニメーションの参考になるサイトまとめ

ここではCSS3を使ったローディングアニメーションが紹介されています。

ローディング画面はユーザが良く目にするものなので、いろいろあって助かりますね。

コピペで簡単！ローディングアニメーションの参考になるサイトまとめ

 

CSS3アニメーションを手軽に作成できるオンラインツール9選

ここではCSS3アニメーションを手軽に作成できるオンラインツールが紹介されています。

ツールを活用して、効率的にアニメーションを作りたいですね。

CSS3アニメーションを手軽に作成できるオンラインツール9選

 

ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事

ここではCSS3を使ったアニメーションを作成する時に参照できるサイトが紹介されています。

覚えておくと便利なサイトばかりですね。

ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事

 

以上、CSSでできるアニメーションまとめサイト・記事を紹介しました。

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

記事を検索

関連するキーワード

関連する記事

CSSの疑似要素first-lineで要素をデザインする方法を現役エンジニアが解説【初心者向け】

CSSの疑似要素first-lineで要素の最初の行をデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
CSS

CSSにおけるアスタリスクの使い方を現役エンジニアが解説【初心者向け】

CSSにおけるアスタリスクの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。  ...
CSS

枠線などを指定したい！CSSのborderの使い方【初心者向け】

今回はCSSで書くborderの使い方に関する解説記事です。borderプロパティは非常に便利で、どのサイトをデザインする上でも必要になってくる知識なので、ぜひ...
CSS

転職・在宅ワークにも繋がる！Web制作の副業の仕事内容と収入を徹底解説

皆さんは本業の収入やお仕事に満足していますか？ 「転職するほど不満があるわけではないけど将来を考えた時にこのままで良いか、なんとなく不安」という方が多いのでは...
ピックアップ

色々な動きを表現できる！CSSのtransitionプロパティの書き方【初心者向け】

CSSのtransitionプロパティを使う方法について解説しています。 一定時間でプロパティを変化させ、アニメーションをつけたい時に便利です。メニューの...
CSS

スペースを作りたい！CSSでmarginの書き方【初心者向け】

初心者向けにCSSでmarginの書き方を解説しています。これからCSSを学習しようと思っている方でも実際に業務で使っている方でもmarginは必ず使用します。...
CSS

あわせてよく読まれている記事

事例から学ぶ！Webアニメーションのテクニックまとめ

本稿は、Studio by UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Nick Babich氏によって投稿されました。   機能的で楽しいアニメーションは、現代のWebデザインの重要な要素の1つです。 インタラクションデザインの細部は、現代のWebサイトに根本的な違いをもたらします。アニメーションは、アプリケーションのステータス（現在の状態）をユーザーに伝えたり、ユーザーの注意を引いたり、ユーザーがアクションの結果を確認するのを助けたり、振る舞いに影響を及ぼすことさえできます。 ユーザー体験を向上させるにはWebサイトのどこどのようなにアニメーションを追加したらいいか、次にいくつかの例を紹介します。   プログレッション アニメーションの読み込み Webアニメーションの最も一般的な使い方の1つは、読み込み時間中にユーザーの気を紛らわせることです。アニメーションを使用すると、ユーザーの時間感覚に影響を与えて、実際よりも短く感じさせることができます。あなたがソースコードを短縮できないなら、待ち時間がなるべく楽しくなるよう努めましょう。 アニメーションの読み込みはシンプルなものがベストです。音などの追加的エフェクトは必須ではありません。 優れたアニメーションはユーザーを魅了します。待ち時間に面白い体験があれば、ユーザーは読み込み時間も気にならないでしょう。 画像クレジット：Thomas Bogner 読み込み時間が短い場合でも、楽しいアニメーションの読み込みがあると、待ち時間にちょっとしたエンターテイメントを提供できるでしょう。   プログレス（進捗）アニメーション 線形のアニメーションは、進捗を表示できます。ローディングバーは、このタイプのアニメーションの最も一般的な例です。 しかし進捗を表すアニメーションは、段階的な線形プロセスにも使用できます。 画像クレジット：Joshua Sortino   スケルトンスクリーン スケルトンスクリーンとは、空白のページに徐々に情報が読み込まれる手法です。スケルトンスクリーンのアクションにより、情報は画面上に徐々に表示されるため、リアルタイムで処理が進捗しているという感覚を作り出します。 ほとんどのWebサイトでは、スケルトンスクリーンとアニメーションを組み合わせて使用することで、読み込み時にユーザーの関心が離れないようにすることができます。   ビジュアルフィードバック ユーザーのアクションに対するアニメーションによるフィードバック（応答） 優れたインタラクションデザインは、ユーザーがインタラクションの結果を視覚的に理解できるように、それを伝えるフィードバックを提供します。 Webサイト訪問者にとって、サイトのどの要素がインタラクティブであるか、またどのようなインタラクションが起こるかを予想できないことは混乱の原因となります。こうした問題を解決するには、インタラクションをクリアで理解しやすいものに設計しましょう。   デスクトップにはホバーアニメーション/モバイルにはエレベーション（奥行き） 要素がインタラクティブであることを示す方法としてビジュアルフィードバックを使う場合、ホバー効果は最も一般的な例の1つです。 ユーザーは要素の機能性が気になるとき、その要素の上にマウスを移動する傾向があります。ホバーアニメーションはユーザーが直感的に分かりやすい設計にしましょう。   しかしモバイルデバイスにはマウスカーソルがないため、ホバー効果を使用できません。 つまり、ボタンや他のインタラクティブな要素をユーザーにタップしてもらうためには、それより先に「インタラクティブな要素であること」を視覚的に表示し、インタラクションの直後にフィードバックを返す必要があるのです。 このようなフィードバックは、ユーザーに彼らのアクションがレスポンスのトリガーとなったことを知らせることができます。例として、以下のボタン要素はアクティブな状態になると、下に押されたように見えます。 画像クレジット：Vadim Gromov 陰影効果は、要素が「タップ可能であること」を示します。   ユーザーの注意を引く 人間の目が動きに引き付けられることはよく知られています。このことを応用すればアニメーションは、ユーザーの注意を引き、ユーザーが実行するアクションを促進するのに最適なツールとなるでしょう。 たとえば、入力フォームはアニメーションで効果を高めることができます。正しいデータが入力されたときには、完了時に「うなずく」アニメーションを導入し、誤ったデータ入力を拒否するときには、「首を横に振る」アニメーションを導入できます。 ユーザーは、このようなアニメーションの意味を即座に理解できるでしょう。 画像クレジット：MichaëlVillar 入力フォームは「首を横に振る」アニメーションを表示します。   ナビゲーション 最近のトレンドは、ハンバーガーメニュー（三本線のアイコン）などのボタン要素がクリックされたときに、隠されたナビゲーションメニューが現れるデザインです。 アニメーションは、2つのステータスの間の連続性を示し、不自然な遷移を避ける上で不可欠です。遷移が優れた設計であれば、ユーザーはどこに注意を向けるべきかを明確に理解することができます。 アニメーションを使用すれば遷移をよりはっきりと表現できるため、ユーザーの利用開始時と利用終了時の間に何が起こったのかも明らかになります。 以下は、Brian Hoff DesignのWebサイトの例です。ユーザーが円で囲まれた矢印ボタンをクリックすると、大きなメニューボックスが右から現れます。このような「ポップアウト」効果のアニメーションは、メニューが画面の外からスライドしているかのように見せて、インタラクション全体をスムーズに実行します。 アニメーションはステータス（状態）間の点と点をつなぎます。   ハードカットではない状態変化 遷移は、状態の変化を示すために非常に重要です。 Adrian Zumbrunnen氏は「UXデザインにおけるスマートトランジション」という記事で、ページ内の別のセクションにつながるリンクがクリックされたときに、アニメーションがコンテキストを維持するのにどれほど役立つかについて、素晴らしい例を紹介しています。 比較対象として、ハードカット（一つ画面から別の画面へ遷移なしに一気に移動すること）に感じられるこの静的で急な変化を見てください。 突然の変化ほど不自然に感じられるものはありません。このようなインターフェースの変更は、ユーザーも処理が難しいと思うでしょう。   アニメーションによる振る舞い アニメーションを加えることは、「生命感を与える」ことです。 後者のナビゲーションの例は、微かなアニメーションを使用しているため、ユーザーはWeb上の記事のどのセクションを読んでいるかを相対的に把握することができます。   [PR] Webデザインで副業する学習方法を動画で公開中クリエイティブな効果 クリエイティブなアニメーションは、ユーザー体験を真に楽しく思い出深いものにします。エンターテインメントをインターフェイスにもたらすことができます。 ストーリーテリングのためのロングスクロール デザイナーは、トップの画面領域を重要な情報でいっぱいにすることに集中していました。しかし幸いなことに、現在このルールは絶対的に正しいものではないとされています。 実際に、「Webページ上でユーザーの注目の約66％は、トップの画面領域の下に向けられている」と言われています。ユーザーの注目がページの上から下へ移動するとき、スクロールはインタラクションデザインの重要な要素としての役割を持ちます。 アニメーションによるストーリーテリングは、退屈になりがちなインターフェースにユーザーとの感情的な結び付きを加えることができます。一般的によく使用されるパララックス（視差効果）アニメーションの代わりに、より繊細な設計を試してください。   まず、Webサイトをスクロール可能な部分に分割します。各部分内でアニメーションを使用してコンテンツを紹介できます。 以下の例のアニメーションは、シンプルなアートのイラストレーションをアニメーション化することで、コンテンツに「生き生き」とした雰囲気を与えます。 画像クレジット：Le Mugs 結論 デザインは、単なるビジュアルプレゼンテーション以上の意味を持ちます。デザインとはインタラクションです。アニメーションはコミュニケーションにとって重要です。 私たちは、Webにはインタラクティブな本質があることを受け入れ、それをデザインの自然な一部分と考える必要があります。 他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。   TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。 独学に限界を感じている場合はご検討ください。
Webデザイン

簡単に作成できる！Unityでアニメーションを作る方法【初心者向け】

ゲームで演出をリッチにするためには、アニメーションを作成する技術が不可欠です。 アニメーションと聞くと何か敷居が高いものと感じる方もいらっしゃるかもしれませんが、Unityでは初心者の方でも簡単にアニメーションを作ることができます。 今回は、Unityでアニメーションを作る方法を解説していきます。 今回は3DのSphereをアニメーションで動かしていきたいと思います。 目次CSSアニメーションの素晴らしいアイデアのまとめHover.cssCSS3アニメーションをらく～に実装！オンラインツール7選 ここまで動かせる！楽しいcss アニメーションのサンプル集ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！CSS3でアニメーション！transitionとanimationまとめ（サンプル付き） 初心者にもコピペで使えるCSSジェネレーター8個CSSのみでエフェクト・アニメーションを実装する方法 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト 【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！CSSアニメーション 入門担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ【CSS】最新マウスオーバーアニメーションスニペットサイト６選。CSSでのロールオーバーアニメーションのチュートリアル集まとめコピペで使えるアニメーションcss集コピペで簡単！ローディングアニメーションの参考になるサイトまとめCSS3アニメーションを手軽に作成できるオンラインツール9選ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事CSSを学習中の方へ そもそもUnityについてよく分からないという方は、Unityとは何なのかについて解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！画面内のオブジェクトを動かす方法についてもっといろいろ知りたいです！ 田島悠介 では今回は、オブジェクトにアニメーションを追加する手順を解説しよう。 大石ゆかり アニメーションということは、オブジェクトに特定の動作をさせたりできるんですか？ 田島悠介 そうだね。移動させたり色を変えたりいろいろできるよ。まずは簡単な座標の移動からやってみようか。   Unityのアニメーションシステム Unityでは簡単にアニメーションを作成できます。 オブジェクトの位置、角度、大きさ、色など基礎的な値はものの1分ほどで設定できてしまいます。 アニメーションと聞くと、プレイステーション4のようなきれいな3Dモデルが自由自在に動いているものや、テレビで見るアニメのようなクオリティの高いものを想像するかもしれません。 そうした物を作るためには、Unity以外の力(Mayaや3DsMaxなどの3Dモデル、アニメーション編集ツール)が必要になってしまいます。 そこで今回は、Unityだけでできるアニメーションの例として、簡単な座標の変更を作ってみましょう。   まずは動かしたいオブジェクトにAnimationコンポーネントをアタッチします。 Animationコンポーネントは、Miscellaneous(その他)グループに含まれています。   次に、[Window]->[Animation]からアニメーションウィンドウを開きます。   アニメーションとアニメーターの違い Animation と Animator の違いについて解説します。 Animation と Animatorというと、大きく2つあります。 Animation コンポーネントと Animator コンポーネント Animation ウィンドウと Animator ウィンドウ   Animation コンポーネントと Animator コンポーネント Animation コンポーネントは 過去の仕組みです。 新しいプロジェクトでは、Animator コンポーネントを利用する必要があります。 過去のAnimation コンポーネントを残している理由としては、後方互換性を確保する意味があります。 つまり、Animation コンポーネントを知らなくても良いということではありません。   Animation ウィンドウと Animator ウィンドウ Animation ウィンドウ では、フローチャートに似たシステムを利用して、アニメーションクリップ全体の取り扱いが可能です。 Animator ウィンドウでは、アニメーターコントローラーアセットを作成・表示・修正できます。   田島悠介 アニメーションの作成を開始してみよう。Hierarchyで動かしたいオブジェクトを選択して、AnimationウィンドウのCreateボタンを押すんだ。 大石ゆかり ファイルの保存ダイアログが表示されました。 田島悠介 アニメーションの名前をつける部分だね。普段は「Jump」や「Walk」などの名前を付けるけれど、今回はサンプルだから「Sample.anim」という名前で作成してみよう。   [PR] Webデザインで副業する学習方法を動画で公開中簡単なアニメーションを作成してみる アニメーションを作成する準備ができました。 実際にアニメーションを作っていきましょう。 （画像はクリックで拡大表示されます。） 田島悠介 それではアニメーションを作っていこう。 Unityでは、キーフレームアニメーションとよばれる方法を採用していて、特定の時間におけるプロパティの値を設定することで、値の補間によってアニメーションを行うよ。 大石ゆかり 難しくてよくわからないです・・・ 田島悠介 はじめはそうだね。実際に触ってみれば感覚がつかめるよ。   アニメーションの作成には、Animationウィンドウ左上の録画ボタンが便利です。 まずはこの録画ボタンを押してみましょう。   録画ボタンがONになっている状態でインスペクタからオブジェクトのパラメータを変更すると、入力フィールドが赤く変化します。 また、この際Animationウィンドウにはキーフレームが追加されています。 　   上記の操作で、0フレーム目にキーフレームが打たれました。 フレームの移動は、画像の部分をドラッグすることで行います。 今回は、30フレーム目に移動してみます。   30フレーム目でもオブジェクトの座標を変更してみます。   フレームを移動させることで、補間されていることを確認できます。   再生ボタンを押すことで、実際の速度でプレビューが行われます。   アニメーションの編集を終える際は、忘れずに次の2つの操作を行ってください。 ・録画モードの停止 ・フレームを0フレーム目に戻す 録画モードの停止やフレームを0フレーム目に戻す操作を行わないと、普通にオブジェクトの座標を変更したい場合でも、アニメーションのフレームとして保存されてしまいます。 録画モードのON/OFFは、Animationウィンドウ左上のアイコンで確認できます。 （時計アイコンになっていれば録画モードOFF）   アニメーションの再生 実行時にアニメーションを再生するには、作成したアニメーションをAnimationコンポーネントのAnimationプロパティに設定します。   また、アニメーションをループさせる場合は、Projectタブでアニメーションを選択し、InspectorタブでWrapModeを変更します。 今回はループさせるために「Loop」に設定してみます。   実行時にアニメーションが再生されます。   まとめ 今回はUnityで簡単なアニメーションを作成していきました。 今回は移動を行いましたが、他にも回転、拡大など様々な効果をつけることができます。 アニメーションをマスターすれば、今後のゲームの表現の幅が広がること間違いなしです。 ぜひとも理解を深めていくようにしましょう。   田島悠介 今回はY軸を指定したので上下に動いたけれど、例えばz軸の値で動かすとオブジェクトが手前と奥に移動するよ。 大石ゆかり インスペクタで編集できる値は、どれもアニメーションさせることができるんですね。 田島悠介 座標の移動以外にも、オブジェクトの大きさを変更したりマテリアルを途中で変化したりと、様々な効果を加えることができるんだ。基本的な手順は今回と一緒なので、ぜひ練習してみよう。 大石ゆかり いろいろ追加して試してみます。ありがとうございました！   Unityを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい Unityを学習していて、このように思ったことはありませんか？ テックアカデミーでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、はじめてでもUnityでオリジナルゲームの制作ができるようになります。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
Unity

意味のあるデザインを！自然なアニメーションの作り方

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ソフトウェアデベロッパーのNick Babich氏によって投稿されました。   モーションによってモバイルアプリに命を吹き込む 10年前、アニメーションやモーションを使用したユーザーインターフェースは効率の悪いものとされていました。派手なサイトに飛び跳ねるポップアップ、点滅するボタンなどを連想させるものでした。 しかしここ数年でそれらの考え方は大きく変化しました。iPhoneやモバイルアプリが導入され、デザイナーの多くは動的なアニメーションの将来性について経験を積んてきました。アニメーションは時が経つとともにインターフェイスの重要な要素になり、デザイナーに全く新しい次元を与えています。 最新のインターフェイスはもはやただの静止画の連続ではありません。アニメーションを使用すると、時間という次元を製品に加えることでソフトウェアと人の間のギャップを埋めることができます。 最高に直感的で楽しい体験はいつもモーションデザインに細かい描写を入れます。 この記事ではユーザー体験をより生き生きと楽しくするために、どこに美しさを追加できるかといういくつかの例を提示します。   読み込みの時間を楽しいものにする 刺激的なオープニングアニメーションがあると、アプリを開くたびにユーザーの気持ちを盛り上げることができます。 しかし、それ以上の役割を果たす場合もあります。下の例のアニメーションは単に楽しいというだけのものではなく、ユーザーの目に影響を与えて集中するべき場所をコントロールしています。 ユーザーがUberアプリを起動すると、マップ上のピンに変化するドロップに目が行きます。   [PR] Webデザインで副業する学習方法を動画で公開中新規ユーザーにとって外観的な魅力のあるコンテンツ ユーザーは初めてアプリに触れたときに、何をしたのかを知り理解しなければなりません。 スムーズな画面遷移と優れたアニメーションは、新規のユーザーをどのようにアプリに引き込むかということにすさまじく影響があります。 以下の例でのオンボーディングは創造性と個性が満載です。ビジュアルデザインとマイクロコピーが際立っており、新しいユーザーがアプリを体感することができます。 Ramotionによるアニメーション   対話型TIPSの組み入れ アニメーションは、アプリ内の各機能についての対話式ショートストーリーを作ることができます。これによってユーザーは次にどうするべきか明確に理解できるようになります。 Ramotionによるアニメーション   視覚的なオリエンテーション デザインにアニメーションを追加する最適の場所は、変化の瞬間です。状態変化が起こるとき、ユーザーは新しい場面が前のものとどう関係しているかを理解する必要があります。 静的なデザインでは状態と状態の間の前後関係を把握することができません。 接続とコンテンツの関係が成立するのは、アニメーションが機能的にも様式的にも役立ったときです。アニメーション化されたトランジションは異なるUI間の中継となり、ユーザーを導くのに役立ちます。 アニメーションはインターフェイス内でユーザーが現在の位置を確認するのに役立ちます。ユーザーは要素の動きに従って、2つの状態がお互いにどのように関係しているのかということを理解することができます。 Anton Aheichankaによるアニメーション   要素間の関係を説明する よいデザインのトランジションは、アプリに触れたときにユーザーの目を必要な場所に正確に誘導します。アニメーションは目的の対象に応じて適切な要素を強調します。 再生ボタンを一時停止ボタンに変換することで2つのアクションがリンクされています。ひとつを押すともう片方のアクションが表示されるようになっています。 Anish Chandranによるアニメーション   空間認識 アニメーションはユーザーが空間インターフェイスのメンタルマップを作成するのに役立ちます。自分がどこから来て、どこに行くのかということをはっきりすることができます。 アニメーションはインターフェイス内で自分の位置を確認し、適切な場所にたどり着くのに役立ちます。   明確なフィードバック アニメーションはユーザーが実行しているアクションを強化するために使用できます。 アニメーションのフィードバックは、ユーザーが操作した結果成功したかどうか及びその理由を示すのに役立ちます。   問題のある状態を示す エラー状態のデザインを考えるときには、ユーザーにはっきりと分かるようにすることが大事です。 パスワード入力エラー時の揺れのアニメーションは、明確なフィードバックのよい例です。人間がお互いにフィードバックを与える、首を横に振るという方法と直接関係します。 アニメーション化されたフィードバックは、要素の複数のレイヤーが連携してユーザーの行動に反応するときにより効果的です。   ユーザーの不安をなくす アニメーションはユーザーが自分の行動の結果を見るのに役立ちます。「言うのではなく見せる」という原則に従い、アニメーション化されたフィードバックを使うことで何が達成されたかを示すことができます。 下のStripeの例では、ユーザーが「Pay」をクリックするとアプリが成功の状態を表示させる前にスピナーが一時的に表示されます。チェックマークのアニメーションによってユーザーは支払いという大事な行為を簡単に行い、またその詳細を確認することができます。   ロジックについての注記 ロジックはすべてのアニメーションの重要な要素のひとつです。 環境にロジックを確実に与える必要があります。複雑さを少なくすることを余儀なくされる小さなスクリーンを適切に扱う方法を考えることが特に大事です。 アニメーションを論理的にかつ目的に合わせてください。あまりにも予測できない作用の過剰なアニメーションは製品のUXを破壊するおそれがあります。 下の例のようなアニメーションは技術的には問題なく実行されていますが、かえって紛らわしいインターフェイスになっています。写真をスワイプするとその人物の詳細ビューに移行するという動作は予測がしにくいからです。 人々はすでに実世界や他のアプリから特定のジェスチャーが何をするかどうかについて多くの先入観を持っています。 つまり、要素を一貫性のない方法で動作させると悪いUXが作成されます。   最後に アニメーションは美しさと機能を結びつけるために幅広い規模と状況で使用されます。しかしアニメーションを作成する際には事前に計画的に考えておく必要があります。 それは、「アニメーションはアプリをクールにするものではなく、ユーザーが期待した体験をもたらすもの」です。 また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

JavaScriptで文字を動かすテキストアニメーション10選を現役エンジニアが紹介【初心者向け】

JavaScriptで文字を動かすテキストアニメーション10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで文字を動かすテキストアニメーション10選について詳しく紹介していくね！ 大石ゆかり お願いします！   目次 テキストアニメーションとは テキストアニメーションでできること テキストアニメーションを実装する方法 テキストアニメーション10選 まとめ   テキストアニメーションとは 魅力的なサイトには必ずと言っていいほど、インパクトあるテキストアニメーションが実装されているかと思います。 ページを開いたときに表示されるテキストや、マウスオーバーなどのアクションに連携するものなど種類も様々にあります。 [PR] Webデザインで副業する学習方法を動画で公開中テキストアニメーションでできること テキストアニメーションの表現方法は本当に沢山あります。 移動系：最もシンプルな方法で、文字を左右上下などへ移動させるアニメーションです 変色系：これも良くあるアニメーションで文字の色を変更させます 3D系：最近流行りのアニメーションで、文字を立体に表現することが出来ます 変形系：これも最近よく見ます。文字を分解したり、結合させてみたり、文字を変形させるアニメーションです ざっと分類してみました。これにあたはまらないものや、組み合あわせされたものなどもあるかと思います。また、アニメーションが発生するタイミングなども多数あるかと思います。 テキストアニメーションを実装する方法 実装方法としては、JavaScriptだけではなく、CSSのみで出来るものありますし、jQueryなどライブラリーで提供されているものなどもあります。 テキストアニメーション10選 animate.js 文字だけではなく色々なアニメーションが表現できます。実装は難しいですが、複雑なアニメーションを表現することが出来ます。 jQuery TextFX これだけでフェイドイン・スライドイン・一文字づつ表示のアニメーションを表現できます。とりあえず簡単にアニメーションを表現するのに向いています。 Typed.js タイプライターのように文字が打ち出されるアニメーションが表現できます。 iTyped.js こちらもタイプライターのように文字が打ち出されるアニメーションが表現できます。ただし、こちらはjQueryに依存することなく利用できるので、場合によっては使い勝手がよいかと思います。 Splitting.js 文字を浮き上がさせるようなアニメーションが表現できます。 Three.js 3Dアニメーション用のライブラリーです。TextGeometryを利用して文字を3D化できます Blotter.js 文字を波のように揺らすアニメーションなど、５種類ほどのアニメーションパターンが表現できます。 textillate.js jQuery のプラグインです。［animate.css］でエフェクトを表現するのでアニメーションの種類が豊富です。 Granim.js グラデーションを制御するライブラリーですが、文字にも応用できるので、シンプルなテキストアニメーションを表現できます。 LetterFx 文字を回転しながら表示(spin)したり、徐々に文字を見せる(fade)などシンプルなアニメーション表現が複数できます。   まとめ 今回は、JavaScriptと連携して表現できるテキストアニメーションをご紹介しました。 実装方法は各キーワードで検索して調べてみてください。テキストアニメーションにはJavascriptを利用せず、CSSのみで表現できるものなども沢山ありますので、そちらも合わせて挑戦してみてください。 筆者プロフィール 小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

マイクロインタラクションで気をつけたい5つのポイント

本稿は、Free Code Campのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UX in Motionの設立者で、ワークショップを主宰しているIssara Willenskomer氏によって投稿されました。   この記事では、私が一週間をかけて数多くのUIアニメーションを観察した末に気づいた、マイクロインタラクションで気をつけたい5つのポイントを解説します。 最初にマイクロインタラクションとは何でしょう？これについては明快な説明を与えています。 「マイクロインタラクションとは、デバイス上でひとつのタスクだけをこなす最小単位の要素」   1. デザイナーとしてのエゴを抑制すること デザイナーであれば、称賛を受けて自分のエゴを満たしたいと思うかもしれません。しかし質の高いマイクロインタラクションをデザインするには、作業中はデザイナーとしてのエゴを忘れることが重要です。 次の例は、Sergey Valiukh氏のデザインしたアニメーションです。アニメーションは新しいアイデアが上手く機能するか実験するには絶好の土台ですが、彼の実験したアイデアは失敗しています（彼はフォント、レイアウト、配色、アニメーションにおいて非常に優れたデザイナーですが）。 このアニメーションの失敗の原因を分析します。 第一に、画像の3Dフリップ機能です。これは全く不必要で有害でさえあります。マイクロインタラクションにおいては、それを省いたらデザインがシンプルになるような無駄な部分は、省くことが正解なのです。 第二に、画像はフィード表示において切り取りされますが、編集ビューにおいて全画面表示になります。これは明らかに機能的ではありません。 第三に、上のナビゲーションメニューのアイコンは、画面遷移に時間が長くかかり過ぎです。最初は素晴らしいデザインに見えるかもしれませんが、そのうち長い待ち時間にうんざりするでしょう。マイクロインタラクションは迅速であることも重要で、最大でも300～400ミリ秒の時間内にスムーズに実行されるべきです。 最後に、画面下の2つのアイコンは表示されるタイミングが異なります。これは紛らわしく余分な設計であり、かえってユーザーの認知的負荷を増やします。   結論 この例のようなアニメーションを設計することには大きな価値があります。しかし、機能的なものとそうでないものを区別し、削るべき無駄な部分を判断して、エゴを忘れ、シンプルでユーザビリティに優れることが重要です。 これはデザイナーが楽しくて美しい詳細を設計してはいけないということではありませんが、デザイナーは自分にとって満足できる細部のデザインが、余分な部分にならないよう注意するべきです。   実践のポイント：削るべき余分なところを見極めましょう。 あなたの設計した詳細なアニメーションは、シンプルでユーザー体験を高める効果のあるものですか？それとも逆にユーザーの認知的負荷を増やすものですか？   2. クリエイティブなデザインを作るためにストーリー性を犠牲にしない ユーザーエクスペリエンスにおいては、さまざまな理由からストーリー性が重要です。 1つには、ユーザーの予想、継続性、認知的負荷と関係するという理由からです。また、私たちの脳が情報の意味を理解し整理するプロセスと関係するからでもあります。   次の例では、Srikant Shettyはストーリー性を台無しにしています（同氏は非常に優れたアニメーター、デザイナーですが）。その原因を分析してみましょう。 まず最初に、フォームの奇妙さに気づくと思います。ユーザーは、インライン入力できると予想します。しかし表示されている入力フォームの行は偽物で、入力できません。 本物の入力フォームはその後ろに隠されています。入力する行をタップすると、隠されていた入力フォームが現れてやっと入力可能になります。 ユーザーが入力フォームを使うときに予想するイメージが阻害されているのです。ユーザーは予想通りにタスクやフローを継続することができず、一度立ち止まって、予想外の状況に対処しなければなりません。   このような誤りは、デザイナーが「クリエイティブ」なデザインを創造しようとするときに生じます。 インタラクションにおけるイメージを維持することよりもクールな効果やテクニックを優先するため、こういったことが起き得ます。その結果インタラクションは不明瞭なものになります。   優れたマイクロインタラクションは、シンプルでフローを備えています。先の例と次の2つの例を比較しましょう。 画像：Andrej Radisic（上） & Matt D. Smith（下） これら2つの例においては、シンプルで的確です。上の例では、行が跳ねるような効果のある要素が使われていますが、基本的なインタラクションモデルに、面白さを追加できるデザインの細部として機能しています。 実践のポイント：シンプルに設計する   [PR] Webデザインで副業する学習方法を動画で公開中3. 単一の動きで実装できなければ、実装しない方がいい 私が観察した限り、成功しているマイクロインタラクションは、例外なく単一の統一された動きで構成されています。一方、失敗しているマイクロインタラクションは動きが複雑です。 次の例で、Romain Passelande氏は間違いを犯しています（同氏はDribbbleのサイトでとてもクールなポートフォリオを公開していますが）。原因を分析しましょう。 アニメーションに慣れていない方には分かりにくいかもしれませんが、単一の動きとして統一できるはずの動きが、2つの別々の動きに分けられています。 変形する線 回転するアイコン 線が変形するのが1つ目の動きで、アイコンが回転するのが2つ目の動きです。次の例で並べて比べると違いが分かりやすいです。 左と右のアニメーションは「単一の動き」の法則に反しています。中央のアニメーションだけが、単一の統一された動きで構成されています。シンプルで効率的な動きです。 実践のポイント：マイクロインタラクションは、単一の統一された動きで構成しましょう。   4. 問題はアニメーションではなく、デザインにある UIアニメーションの微妙なニュアンスを研究する人は皆、デザイナーが「静的なデザイン」から「動き」を分離するのは難しいという問題に直面します。 これはもっともなことであり、優れたマイクロインタラクションが継ぎ目のない動きを備えていることにも起因します。   一方、失敗したマイクロインタラクションは非常に目立ちます。 次の図表は、デザインとアニメーションの関係性に関する理論を示したものです。 一般的には、点と矢印のある領域（良いアニメーション×良いデザインの領域）を目標とすることになるでしょう。 この理論を現実に応用してみましょう。   次の例では、デザインをアニメーションから分離する練習を行います。Sam Thibault氏は、あまりクールではないデザインに、優れたアニメーションを加えています（同氏は、Hanndsomeに勤める非常に才能のあるデザイナーですが）。 「このデザインは斬新で優れているのになぜ？」と疑問に思うかもしれません。 たしかにその通りですが、ここで問題としたいのは、「カートに追加（add to cart）」ボタンの扱い方についてです。   この例の場合、悪いデザインをアニメーションによって解決することは不可能です。問題はアニメーションではなく、デザインそのものにあるからです。 「カートに追加」ボタンには、形を変えて画像周辺のガターを占領するという、変形効果が加えられています。この効果は不必要であるだけではなく、「カートに追加」ボタンのUI要素としての重要性を考えれば、ユーザーの認知的負荷を増やします。   映画製作の世界では、セットの問題は脚本に起因すると言われています。悪い脚本は悪い撮影シーンを生み出します。それと同様に、悪いデザインは悪いマイクロインタラクションを生み出すのです。 実践のポイント：アニメーションに頼る前に、まずデザインの意味を考えましょう。   5. 打たないショットは100％外れる このメッセージは、アイスホッケー選手のウェイン・グレツキー氏の名言です。 彼はアイススケートのリンク上で、対戦相手の攻撃を軽快に滑ってかわしながら、ゴールのネットにボールを入れるのを得意としています。この名言は、マイクロインタラクションをデザインするデザイナーについても当てはまります。   ほとんどのデザイナーは300〜400ミリ秒のアニメーションをデザインすることに慣れていないため、デザインの細部を制御することは難しく、それらに隠されたチャンスに気づくことが難しいのです。 比喩で例えるとしたら、これは複雑なジャグリングであり、ボールを見失って落とすのはたやすいことなのです。   Ivan Bjelajac氏による次の例は、デザインの細部で表現できるはずの5つのチャンスを逃しています。 メニューボタンと「戻る」ボタンは、アイコンの変形をシンプルに美しくデザインするチャンスです。しかし、最初のトップページ全体がメニューアイコンのスライド効果で覆われるため、統一感のないデザインになっています。 四角形の黄色い右向き矢印アイコン ――この回転効果、スケール効果は不必要です。この矢印アイコンだけが主張するデザインは奇妙です。コンテンツに合わせた画面遷移にするべきです。 画面遷移において、テキストコンテンツに加えたこのフェードイン・フェードアウト効果は不必要です。一貫して表示したままの方がいいでしょう。 見出しごと左から右にスライドさせていますが、コンテンツだけをスライドさせた方が、よりシンプルに美しくなるでしょう。 メイン画像は、バナー表示されるときに切り取り効果が加えられています。画像はありふれた方法で表示するのではなく、コンテキストに合わせて再構成することが理想です。   細部のデザインに十分な注意が払われた次の例と比較してみましょう。 これほどシンプルで美しいマイクロインタラクションは想像できません。あらゆる手段が講じられ、細部のデザインは完璧です。 実践のポイント：デザインの細部に注意を向けましょう。あらゆる手段を講じましょう。チャンスを逃してはなりません。   結論 あなたにこれまでアニメーションをデザインした経験がないとしても、シンプルな美しいマイクロインタラクションをデザインすることは可能です。大事なコンセプトは次の5つです。 エゴの抑制 ストーリー性 単一の動き アニメーションは万能の解決策ではありません デザインの細部にはチャンスが隠されています   また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 これからデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。
Webデザイン

animateメソッドを使ってjQueryでアニメーションを実装する方法

JavaScriptのライブラリであるjQueryのanimateメソッドを使ってアニメーションを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 animateメソッドを利用すると、簡単にアニメーションを適用できます。 実務で、ちょっとアニメーション処理を加えたい時に利用してみてください。   目次CSSアニメーションの素晴らしいアイデアのまとめHover.cssCSS3アニメーションをらく～に実装！オンラインツール7選 ここまで動かせる！楽しいcss アニメーションのサンプル集ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！CSS3でアニメーション！transitionとanimationまとめ（サンプル付き） 初心者にもコピペで使えるCSSジェネレーター8個CSSのみでエフェクト・アニメーションを実装する方法 css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト 【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ【Webサイトに動きと個性を】CSSでアニメーションを駆使する方法！CSSアニメーション 入門担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ【CSS】最新マウスオーバーアニメーションスニペットサイト６選。CSSでのロールオーバーアニメーションのチュートリアル集まとめコピペで使えるアニメーションcss集コピペで簡単！ローディングアニメーションの参考になるサイトまとめCSS3アニメーションを手軽に作成できるオンラインツール9選ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事CSSを学習中の方へ   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   animateメソッドとは animateメソッドはその名の通りアニメーションを実装するためのメソッドです。 animateメソッドでは、オブジェクトの移動や透過率などを変更できます。 アニメーションを実装するためのメソッドは何個か存在しますが、簡単なアニメーションの場合、animateメソッドが一番使用されています。   大石ゆかり 田島メンター！アニメーションのように要素を動かしたり、変化させたりできますか？ 田島悠介 jQueryのanimateメソッドがいいね。取得した要素を、指定した大きさや位置に、指定した時間で、移動させることができるんだよ。 大石ゆかり toggleメソッドやhideメソッドなんかも、ゆっくりと変化しますよね。 田島悠介 そうそう。あれも一種のアニメーションなんだ。では、animateメソッドを書いてみよう！   animateメソッドの書き方 ここではanimateメソッドの基本的な書き方を解説します。 基本のコード 基本のコードとしては、動かす要素名に対してparamsプロパティで指定したアニメーションを適用します。 [duration], [easing], [complete]は省略可能です。 $('動かす要素名').animate(params, [duration], [easing], [complete]) 使用例 $(function() { $('動かす要素名').animate({ '動かすアニメーション名': '動かす距離' }); }); 動かす要素名はclassやidで指定します。 動かすアニメーション名はopacity(透明度)や、marginLeft（右に動かす）などの指定が可能です。 動かす距離は、100pxのように指定可能です。   animateメソッドのプロパティ例 animateメソッドでアニメーションに利用できるプロパティは、以下の4つです。 params duration easing complete これら4つの役割と利用例を解説します。 params paramsプロパティは必須です。 paramsプロパティでは、最終的に変化させるCSSのキーと値のマップ値を指定します。 animateメソッドのparamsプロパティに指定できるCSSのコードは、基本的に数値で表せるものです。 よく利用するものとして次の10個を例示します。 width（幅） height（高さ） top（上） left（左） right（右） bottom（↓） margin（マージン） padding（パディング） fontSize（フォントサイズ） opacity（透明度） 実際にはCSSのmargin-leftを指定する場合、leftとmarginを組み合わせてmarginLeftのような指定を行います。 CSSのmargin-leftとは異なり、marginLeftという記法にする必要があります。 fontSizeもCSSの記法であればfont-sizeと記載するところを、fontSizeという記法で指定します。 これはキャメルケースという記法で、区切り文字部分を大文字で表す記法です。 animateメソッドを利用する上での文法上の決まりですので使ってみてください。 実際の指定は、pxやemや%を単位として指定します。   たとえば、”width”: “100px”と指定することで、id=”box”要素の幅が100pxに伸びるアニメーションになります。 $("#box").animate({ "width": "100px", });   duration durationプロパティは省略可能なオプションです。 一般的には数値を指定します。 1000を指定すると、1秒のアニメーションを意味します。 何も指定しないとnormalという指定になります。 normal以外にもslowやfastという指定値も可能です。   easing easingプロパティは省略可能なオプションです。 easingプロパティでは、値の変化を調節する独自関数を指定できます。 easingプロパティでは、swingとlinearという指定値が用意されています。 swingが初期値です。 swingは、始めと終わりは緩やかで途中は速めのアニメーションです。 linearは 、一定スピードのアニメーションです。   complete complete プロパティは省略可能なオプションです。 complete プロパティでは、アニメーション終了時に実行する処理を指定できます。   [PR] Webデザインで副業する学習方法を動画で公開中実際にアニメーションを作ってみよう 簡単にアニメーションを実装してみましょう。 id=”box”という要素をアニメーションによって動かしてみます。 今回のコードは幅40px、高さ40pxの箱を下に200px動かすコードです。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS overflow</title> <link rel="stylesheet" type="text/css" href="sample.css"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script type="text/javascript">
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 【すぐに使える！】CSSのアニメーションをまとめたサイト・記事20選