広い部屋に引っ越したい

得意なことを仕事にしたのであとは稼ぐだけ

【CSS3】transition でプロパティを複数指定する

f:id:damdom:20171203201442p:plain:w200

小ネタです。

CSS3 の transition(トランジション)で複数のプロパティを指定する方法です。
プロパティごとに時間変化を細かく設定できます。


transition プロパティとは

時間変化をする transition 関連をまとめて書けるショートハンドです。 以下のプロパティをまとめて書くことができます。

transition-property

トランジション効果 を適用する CSS プロパティの名称 を指定
デフォルトは all なので、記述しない場合すべてのプロパティに適用されます。

transition-duration

トランジションによるアニメーションが 完了するまでの時間
デフォルトは 0s なので、記述しない場合アニメーションはしません。
単位は秒 s またはミリ秒 ms で記述します。

transition-timing-function

トランジション中間状態 を指定
デフォルトは ease

transition-delay

トランジションがはじまるまでの 待ち時間
デフォルトは 0s なので、記述しない場合は待ち時間はありません。
単位は秒 s またはミリ秒 ms で記述します。

記述例

CSS プロパティ transition-property と 時間 transition-duration を設定したときの記述例です。

  • transition: 0.3s; すべてのプロパティ(デフォルト値 all が入る)を 0.3s で時間変化する。
  • transition: all 0.3s; すべてのプロパティを 0.3s で時間変化する。
  • transition: opacity 0.3s; 透明度だけ 0.3s で時間変化する


複数のプロパティを指定して時間変化させたい

プロパティごとにカンマ区切りしながらひとつずつ指定する。

transition: [プロパティ1] [時間変化1], [プロパティ2] [時間変化2], [プロパティ3] [時間変化3];
transition: border-width 0.1s, top 0.1s;

サンプル

codepen.io

ボタンのスタイルです。

  • 線幅 border-width
  • 位置 top

だけ時間変化させたい。
背景 background は時間変化させないものです。

f:id:damdom:20171227155557p:plain

.btn {
  /* 複数で指定する時はカンマ区切り */
  transition: border-width 0.1s, top 0.1s;
  border-bottom: 3px solid #444;
  top: 0;
  background: #fff;
}
.btn:hover {
  border-width: 0;
  top: 3px;
}
.btn:active {
  /* 背景は時間変化していない */
  background: #f2f2f2;
}

複数のプロパティを指定しない書き方

.btn {
  transition:  0.1s;
  ...
}

複数のプロパティを指定しない書き方だと、all が補完され、すべてのプロパティが時間変化します。 このサンプルの場合だとボタンを押したときの背景 background もアニメーション付きで変化します。

hover に transtion を設定した場合

.btn:hover {
  transition:  0.1s;
  border-width: 0;
  top: 3px;
}

上記のように hover に transtion を設定した場合はカーソルが離れたときの動きが時間変化しなくなってしまいます。


参考

developer.mozilla.org

developer.mozilla.org




べころもち工房 Works

フリーランスとして仕事を始めました

2018年4月よりお仕事募集中です。内容は HTML/CSS/JS のコーディングやイラスト作成です。 お問合わせは Twitter からどうぞ。

Web 技術系同人誌

Vue.js の SPA でポートフォリオサイトを作ったときの制作記。HTML/CSSがひと通りわかっていて、JSが少し書ける方向けです。

booth.pm

ポートフォリオサイト

その他

Tumblr(Web 以外の制作物)

becolomochi (beco) · GitHub