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

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

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

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

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

 

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

 

 

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: 変化させるプロパティ 変化させる秒数 変化のさせ方;

 

 

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

実際に書いてみよう

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

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デザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

 

 

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

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

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