transition

CSS3で定義されたtransitionsで、要素のプロパティを徐々に変化させられます。

プロパティ トランジション効果に対する作用 初期値
transition-property 効果を適用するCSSプロパティの名前 all
transition-delay 効果が始まるまでの時間 0s
transition-duration 効果が完了するまでの時間 0s
transition-timing-function 効果の適用速度 ease

これらのプロパティを、まとめて指定できるプロパティもあります。

transition: [ none | property ] || duration || timing-function || delay
transition - CSS | MDN

プロパティ

transition-duration

単位としてs (秒) またはms (ミリ秒) を指定します。

  • 0s
  • 1.5s
  • -60s
  • 0ms
  • 1500ms
  • -60000ms

単位を省略すると、ブラウザによっては機能しないことがあります。<time> - CSS | MDN

参考

transition-timing-function

トランジション効果の適用速度を指定します。この効果のタイミングを指定するために、2つのタイミング関数

  • cubic-bezier( x1, y1, x2, y2 )
  • steps( number_of_steps, direction )

が用意されています。また、これらの関数を簡単に呼び出すために、下表のようにパラメータが設定されたキーワードもあります。

キーワード 実体
linear cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in cubic-bezier(0.42, 0.0, 1.0, 1.0)
...  
一般的なタイミング関数のキーワード - timing-function - CSS | MDN

バーのサイズが変化する様子から、キーワードごとのタイミングの違いを確認できます。

    transitionをサポートしないブラウザでは動作しません。

    参考

    適用方法

    :hoverや:activeなどの擬似クラスで指定するのが簡単です。

    #sample:hover {
    color: red;
    transition: all 1s;
}

    特定の属性にだけ適用するには、その属性名を明示します。また複数の属性に適用するには、カンマ区切りでそれらを列挙します。

    transition: width 1s, height 2s;

    width属性など既定値がautoとなっている属性は、初期値を明示しないとtransition-durationによる遷移時間が無視されます。

    width: auto
    width: 100%;
    transitionをサポートしないブラウザでは動作しません。

    スクリプトによる適用

    ページの読み込み時など、対象の要素が表示された時点からトランジションの効果を適用するには、ドキュメントの読み込みを待ってからスクリプトでスタイルを指定します。

    <p id="abc">ABC</p>

<script type="text/javascript">
window.onload = function()
{
    var elem = document.getElementById( 'abc' );
    elem.style.transitionDuration = '1s';
    elem.style.color = 'red';
}
</script>

    または、強制的にスタイルの処理を完了させてから、新しいスタイルを指定する方法もあります。CSS transitions for dynamically created DOM elements - Tim Taubert

    <p id="abc">ABC</p>

<script type="text/javascript">
var elem = document.getElementById( 'abc' );
window.getComputedStyle( elem ).color;

elem.style.transitionDuration = '1s';
elem.style.color = 'red';
</script>

    この方法は、動的に作成した要素にトランジション効果を適用するときに、特に有用です。

    適用例

    背景色のアニメーション

    #sample:hover {
    background-color: red;
    transition-duration: 3s;
}
    ここにマウスポインタを合わせてください。
    transitionをサポートしないブラウザでは動作しません。

    要素の移動

    #sample > div {
    position: absolute;
    left: 0%;
    transition-duration: 1s;
}
#sample:hover > div {
    left: 30%;
    transition-duration: 3s;
}
    ここにマウスポインタを合わせてください。
    transitionをサポートしないブラウザでは動作しません。

    移動する要素自身の:hoverでスタイルを指定すると、要素が移動したときにマウスポインタが要素から外れ、:hoverのスタイルが解除されることがあります。よってスタイルを適用する親要素の:hoverでスタイルを指定します。

    要素の回転

    transform属性と組み合わせることで、要素の回転をアニメーション表示できます。

    #sample > div {
    transform: none;
    transition-duration: 1s;
}
#sample:hover > div {
    transform: rotate( 360deg );
    transition-duration: 3s;
}
    ここにマウスポインタを合わせてください。
    transitionをサポートしないブラウザでは動作しません。

    時間の指定方法

    必ず単位をつけて指定します。有効な単位は、

    • s
    • ms

    の2つです。大文字小文字は区別されないため、SやMsのように指定しても有効ですが、推奨はされません。<time> - CSS | MDN

    参考

    属性 (プロパティ)

    HTMLの情報サイトから、まとめて検索