transitionプロパティを複数使ってCSSでアニメーションさせる方法を現役エンジニアが解説【初心者向け】

初心者向けにtransitionプロパティを複数使ってCSSでアニメーションさせる方法について解説しています。最初にtransitionプロパティの基本の値の指定方法を説明します。次に複数のプロパティを使ったアニメーション作成の書き方をサンプルコードで見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

transitionプロパティを複数使ってCSSでアニメーションさせる方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

transitionプロパティを複数使ってアニメーションさせる方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

transitionプロパティについて

transitionプロパティを設定することによって、初期時の表示から、変化が加えられた結果の表示にいたるまでの過程(プロセス)を動作として表現できます。なお、一部、変化ではないと判定されて無効になってしまうプロパティ(displayなどによる属性の変更)があります。

 

基本的な使い方

transitionプロパティの値として、変化の対象として捕捉するプロパティと、結果までにいたる過程の時間を指定します。変化を加えるための処理は、CSSの擬似クラスの:hoverなどを用いるか、JavaScriptにてスタイルを加える必要があります。

 

CSS

See the Pen
2019-12-23-sample-11
by YOHEI INAI (@yohei_inai)
on CodePen.

対象と定めている要素にマウスカーソルを乗せることによって、6秒をかけて幅が300pxから1200pxにまで伸びます。

 

JavaScript

See the Pen
2019-12-23-sample-10
by YOHEI INAI (@yohei_inai)
on CodePen.

対象と定めている要素がブラウザに識別されてから3秒後に、6秒をかけて幅が300pxから1200pxにまで伸びます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

複数のプロパティを使う方法

値として設定してから、さらに、 「,(カンマ)」を加えて、複数として連続させることができますが、allを設定することの方が簡単です。

See the Pen
2019-12-23-sample-12
by YOHEI INAI (@yohei_inai)
on CodePen.

 

アニメーションを作ってみよう

See the Pen
2019-12-23-sample-13
by YOHEI INAI (@yohei_inai)
on CodePen.

上記のサンプルコードのアニメーションは、ボタンにマウスカーソルが乗ることによって、ボタンの背景色を変化させて明暗を表現しています。

See the Pen
2019-12-23-sample-14
by YOHEI INAI (@yohei_inai)
on CodePen.

上記のサンプルコードのアニメーションは、メニューにマウスカーソルが乗ることによって、高さを収縮させることによって隠されていました各項目を表示させています。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。