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

初心者向けにCSSのtransitionプロパティを使って動きを表現する書き方について解説しています。CSSだけでアニメーションを実装したい際に便利なプロパティです。実際に書きながら理解していきましょう。

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

CSSのtransitionプロパティを使う方法について解説しています。

一定時間でプロパティを変化させ、アニメーションをつけたい時に便利です。メニューのスライドインやスライドアウトにtransitionが使われていることがあります。

シンプルな動きを簡単に実装できるので、ぜひ使い方を覚えておきましょう。

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

 

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

 

大石ゆかり

田島メンター!!hoverを使ったマウスオーバー時のアクションですが、少しずつ変化していく感じにはできませんか〜?

田島悠介

そういうときはtransitionプロパティを使ってみよう。

大石ゆかり

transitionを使うとどうなるんですか?

田島悠介

推移に関する条件を指定するものなんだ。例えばどれぐらいの時間をかけてアクションの実行を行うかというようなことを決めることができるよ。

 

transitionプロパティとは

transitionプロパティとは、時間経過による変化を表現するときに使います。

具体的には、「カーソルを当てると徐々に背景色を変える」といったことができるようになります。

他にもanimationプロパティなどもありますが、transitionプロパティは比較的シンプルな変化をさせるときに使われます。

 

transitionプロパティの使い方

transitionプロパティは次のように指定します。

-webkit-transition-property: 変化させるプロパティ(backgroundなど);
-webkit-transition-duration: 変化させる秒数;
-webkit-transition-timing-function: 変化のさせ方;

 

-webkit-transition-timing-functionは以下のように指定します。

・default
・linear: 一定のスピード
・ease-in: 徐々に加速
・ease-out: 徐々に減速
・ease-in-out: 徐々に加速して徐々に減速
・cubic-bezier: カスタム

 

また、次の省略記法も使うことができます。

-webkit-transition: 変化させるプロパティ 変化させる秒数 変化のさせ方;

 

田島悠介

transitionの基本の書き方になるよ。

大石ゆかり

かなり細かい指定ができるんですね。

田島悠介

次は実際の例で見てみよう。今回は少しずつ色が変わるというのをやってみるよ。

 

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

実際に書いてみよう

実際に書いてみましょう。

css部分
------------------------
#demo {
  height: 100px;
  width: 200px;
  background: rgb(255, 100, 100);
  -webkit-transition-property: background;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
}
#demo:hover {
  background: rgb(100, 255, 100);
}
/* 省略して書くこともできます。 */
#demo2 {
  height: 100px;
  width: 200px;
  background: rgb(255, 100, 100);
  -webkit-transition: background 2s ease-in-out;
}
#demo2:hover {
  background: rgb(100, 100, 255);
}
------------------------
html部分
------------------------
<div id="demo"></div>
<br>
<div id="demo2"></div>
------------------------

 

ブラウザでアクセスすると以下のように動きます。

以上、transitionプロパティの使い方を解説しました。

変化のさせ方、変化のスピードなども自由に変えられるので、いろいろ試してみてください。JavaScriptが書けなくてもアニメーションが作れるので、手軽に実装できるでしょう。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

 

田島悠介

色の部分にマウスを合わせてみよう。どうなるかな?

大石ゆかり

少しずつ色が変わってます!CSSではこんなこともできたんですね。

田島悠介

動きを入れることで表現の方法が増えるので、場面に応じて工夫してみよう。

大石ゆかり

少しずつ試してみます。ありがとうございました!

 

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

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。

独学に限界を感じている場合はご検討ください。