CSS - tansition-timing-function

• トップ
• CSSリファレンス
• tansition-timing-function

概要

サポート (説明)

説明

トランジションの変化の具合を指定します。指定可能な値は、animation-timing-function を参照してください。トランジションに関する詳細は transition を参照してください。

使用例

下記の例は、.test クラスの要素にマウスを乗せた(:hover)際、0.1秒の遅延時間の後、横幅(width)を 0.2秒かけてリニア(linear)に 300px に広げています。

.test {
  width: 100px;
  height: 30px;
  background: #f66;
  transition-property: width;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0.1s;
}
.test:hover {
  width: 300px;
}

<div class="test"></div>

関連項目

リンク

• http://www.w3.org/TR/css3-transitions/#transition-timing-function-property
• https://developer.mozilla.org/ja/docs/Web/CSS/transition-timing-function
• http://caniuse.com/#feat=css-transitions