トランジションを適用するプロパティを指定する「transition-propertyプロパティ」の使用方法を記載
CSS3／2.1
対応ブラウザ
| 初期値 | all |
| 適用される要素 | すべての要素（::before疑似要素、::after疑似要素を含む） |
| モジュール | CSS Transitions |
| 継承 | なし |
概要・使用方法
{ transition-property: プロパティ名;}「transition-propertyプロパティ」は、トランジションを適用するプロパティを指定します。トランジション効果とは時間的変化のことです。「:hover」やユーザーアクション疑似クラス、JavaScriptを使用することで、ユーザーの動きに合わせてトランジション効果を付けられます。マウスオーバーで背景の色を変化させたりすることができます。
プロパティ名はカンマ（,）で区切って複数指定することができます。
指定できる値（プロパティ名）
| プロパティ名 | 変化を適用するプロパティ名を指定します。カンマ（,）で区切って複数指定できます。 |
| all | トランジションを適応可能なすべてのプロパティに適用します。 |
| none | どのプロパティにも効果を適用しません。 |
サンプルコード
div要素にマウスオーバーしたときに背景色とサイズがふわっと変更されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>transition-propertyプロパティCSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.transition-btn{
width:400px;
height:30px;
text-align:center;
background-color:silver;
transition-property: background-color,width;
transition-duration: 2s;
}
.transition-btn:hover{
background-color:red;
width:200px;
}
</style>
</head>
<body>
<div class="btn">transition-property</div>
</body>
</html>実行結果
transition-property
コメント