CSSでアニメーションが作れる!簡単なCSSアニメーション、一緒に作ってみませんか?

デザイナー

ホ ジヘ

こんにちは。ホです。
今回は、Webの面白い機能、CSSアニメーションを紹介したいと思います!



HTML、CSSとは何?

皆さんはCSSについてどのくらいご存知でしょうか。
HTMLを聞いたことがあれば、一度は聞いたことがあるかもしません。

html&css

HTMLとは、Webサイトに表示されている要素(テキストや画像、リスト、リンクなど)を単語として並べたWebサイトの骨組みだと言えます。
CSSは、HTMLを飾ってくれる役割をします。色相、サイズ、ポジションなどを調整することができます。

それどころかCSSには、アニメーション機能もあります。
Adobe After Effects(動画制作・編集プログラム)などを使わなくても、アニメーションを作ることができるんです!



CSSアニメーションの基本:
キーフレーム、アニメーションプロパティ

まずは、アニメーションを作るための、CSSの機能であるキーフレームやアニメーションプロパティを説明します。
この2つは、CSSの言語なのでCCSに指定するプロパティです。

keyframe

上のコードを見ると、「@keyframes」の次に「fadeIn」というテキストがあります。
この「fadeIn」は自分が決めた「アニメーションの名前」です。
キーフレームとはアニメーションの進行度合いを示しており、進行度合いが0%から100%に増加することで自分が作りたい動きを再現できます。例えば、アニメーションの開始時(0%)の時は、透明度を「0」であり要素が見えない状態です。そして終了時(100%)では、透明度が「1」なので要素が見えるようになります。



animation property
アニメーションプロパティとは、アニメーションの名前、アニメーションが始まって終わるまでの時間、アニメーションの繰り返し回数などの8つの機能です。
アニメーションプロパティを追加することで、アニメーションが実装できます。 上のコードは6つの機能が書いてありますが、もっと詳しく知りたい方は「【CSS3】@keyframes と animation 関連のまとめ」をご参考くださいー!


では、簡単なアニメーションを作成していきます!ぜひ一緒に作成してみてください!



CSSで簡単なアニメーションを作成してみましょう!

左から右に移動したボールがまた戻ってくる簡単なアニメーションを作りたいと思います。

1.まずHTMLでボールの要素を作成します。私はボールに「circle」という名前を付けてあげました。



2.CSSで図形の位置やサイズを調整し、「border-radius」を作成して円の形を作ります。カラーはアクアリングのカラーを指定しました!


3.キーフレームを作成します。
「@keyframes」の次にアニメーションの名前を付けてあげます。私は、ボールを右側に移動したいので、「right」に決めました。
開始時(0%)には、動かないのでX軸の位置を「0」に指定します。
終了時(100%)には、X軸の位置を「400px」に指定したので、ボールは右に400pxくらい移動する予定です!



4.リズム感あるアニメーションを作成します。
アニメーションプロパティを利用してアニメーションの時間を調整し、トランジション(Transition)を指定します。
トランジションを指定したら、柔らかく動くことができ、高いクオリティのアニメーションを作ることができます。



アニメーション応用‐アニメーションなし

アニメーション応用‐アニメーションあり

基本概念を応用して違うアニメーションを作ってみました。
確かにアニメーションがあると自然の清涼さをより感じられますね!
上記のアニメーションについてもっと詳しくは「19 cool CSS animation examples to recreate」をご参考ください!



まとめ

アニメーションは、難しい分野だと思いましたが、CSSアニメーション基礎を調べて触ってみたら、そんなに難しくないと感じられました。
複雑なプログラムを使わなくても、テキストを書くことだけでデザインを作成することができるので、すごく魅力的な言語だと思っています。
皆さんも一緒にWebの魅力を楽しみませんか?

 

投稿日の近いレポート

まなぶ

【新卒ハテナ辞書】コトバをまなぶ!会社説明会で聞いた業界用語編

15 Nov 2019

岡田 千裕

NEW

はたらく

【仕事の時短ツールまとめ】ツールを利用し、作業を効率化しましょう!

04 Dec 2019

松本 雄太朗

まなぶ のレポート一覧