CSS - tansition

トップ > CSSリファレンス > tansition

概要

属性名 tansition
<single-transition> [, <single-transition>]*
値の詳細 <single-transition> = [ none | <property> ] || <time1> || <function> || <time2>
初期値個々の属性を参照
適用可能要素すべての要素 (::before, ::after を含む)
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3104(-moz)
16
1.0(-webkit)
26
11.5(-o)
12.1
3.1(-webkit)
6.1

説明

transition 属性は、transition-propertytransition-durationtransition-timing-functiontransition-delay によるトランジション(遷移)に関わるパラメータをまとめて指定します。:hover を用いると、マウスを乗せた時のスタイルを指定することができますが、トランジションを用いることにより変化にかける時間などを制御することが可能となります。transition に指定する値は省略可能で順不同ですが、時間と解釈される値は一つ目が transition-duration で、二つ目が transition-delay と解釈されます。

animation によるアニメーションがページを開いた際に開始するのに対し、トランジションは、ページを開いたのちに発生する :hover などの契機で開始します。:hover の他には、:checked、:active、:target、:focus や、jQuery などで要素にクラスを追加する場合の変化にも適用されます。

説明
noneどの属性も対象としません。
<property>対象とする属性名を指定します。transition-property を参照してください。
<time1>変化にかける時間を指定します。transition-duration を参照してください。
<function>変化のタイミング関数を指定します。transition-timing-function を参照してください。
<time2>変化を開始するまでの遅延時間を指定します。transition-delay を参照してください。

使用例

下記の例では、:hover によって width が変化するのを、0.2秒で変化するように指定しています。

CSS
.test {
  width: 100px;
  height: 30px;
  background: #f66;
  transition: 0.2s;
}
.test:hover {
  width: 300px;
}
HTML
<div class="test"></div>
表示

下記の様にカンマで複数指定することで、width は 0.2秒、height は 0.4秒で変化させることもできます。

CSS
  transition: width 0.2s, height 0.4s;

任意のタイミングでトランジションするには

任意のタイミングでトランジッションを発動させるには、jQuery などを用いてクラスを追加・削除します。

HTML
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<style>
#box {
  width: 30px;
  height: 30px;
  background: #f66;
  transition: 0.2s;
}
#box.box-open {
  width: 300px;
}
</style>
<script>
function openBox() {
  $('#box').addClass('box-open');
}
function closeBox() {
  $('#box').removeClass('box-open');
}
</script>
<button type="button" onclick="openBox()">Open</button>
<button type="button" onclick="closeBox()">Close</button>
<div id="box"></div>
表示

関連項目

transition, transition-property, transition-duration, transition-timing-function, transition-delay

リンク


Copyright (C) 2016-2018 杜甫々
初版:2016年1月3日、最終更新:2018年12月30日
http://www.tohoho-web.com/css/prop/transition.htm