CSS辞典 transitionプロパティ解説
トランジション効果（transition-property、transition-duration、transition-timing-function、transition-delay）をまとめて指定する「transitionプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
目次
対応ブラウザ
| 初期値 | transition-property、transition-duration、transition-timing-function、transition-delayプロパティに準じる。 |
| 適用される要素 | すべての要素（::before疑似要素、::after疑似要素を含む） |
| モジュール | CSS Transitions |
| 継承 | なし |
概要・使用方法
{ transition: -property -duration -delay -timing-function;}「transitionプロパティ」は、トランジション効果関連のプロパティを一括で指定することができます。
指定する値は各プロパティ（transition-property、transition-duration、transition-timing-function、transition-delay）と同じです。「transition-durationプロパティ」と「transition-delayプロパティ」は順序が決まっています。１つ目がtransition-durationプロパティ、2つ目がtransition-delayプロパティの値と見されます。省略した場合は各プロパティの初期値が適用されます。
指定できる値
transition-propertyプロパティの解説
transition-durationプロパティの解説
transition-delayプロパティの解説
transition-delayプロパティの解説
サンプルコード
以下のCSSプロパティの指定は同じ挙動を示しています。
{
transition-property:all;
transition-duration:1s;
transition-delay:2s;
transition-timing-function:ease-in;
}
{transition: all 1s 2s ease-in;}<!DOCTYPE html>
<html lang="ja">
<head>
<title>transitionプロパティCSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.transition-btn{
width:400px;
height:30px;
text-align:center;
background-color:silver;
transition: all 1s 2s ease-in;
}
.transition-btn:hover{
background-color:red;
width:200px;
height:100px;
}
</style>
</head>
<body>
<div class="transition-btn">transition指定</div>
</body>
</html>実行結果
transition指定