CSS transitionでスタイルの変化をアニメーションする
transitionを使って、スタイルの変化をアニメーションで表現する方法を紹介します。
例えば以下のように、マウスオーバーすると擬似クラスが適用されて横幅が伸びる要素があるとします。
<style>
.link {
width: 100px;
}
.link:hover {
width: 300px;
}
</style>
<a class="link">ボタン</a>このときの横幅の変化をアニメーションで表現したい場合は以下のスタイルを設定します。
<style>
.link {
width: 100px;
transition: width 1s;
}
.link:hover {
width: 300px;
}
</style>
<a class="link">ボタン</a>transitionの考え方
transition: スタイル 時間の形式で指定します。
transition: width 1sと指定した場合は、「widthの変化を１秒かけて適用させる」という意味になります。
transitionを指定していない状態でwidthを100pxから300pxに変化させると、100px→300pxに一瞬でスタイルが適用されます。
transition: width 1sを指定した状態でwidthを100pxから300pxに変化させると、以下のように、少しずつスタイルを適用していきます。
100px→101px→102px→ ... →298px→298px→300px（１秒かけてスタイルが適用される）
このスタイル適用の変化がアニメーションとして見えることになります。
widthに限らず、数値を指定するスタイルはすべてtransitionを適用することができます。
transition: all 0.5sとすると、margin, heightなどすべてのスタイルの変化を０．５秒かけて適用することになります。
また、見落としがちですが色も#000のように色コードでの数値指定になりますので、色の変化も指定可能です。
<style>
.link {
width: 100px;
height: 20px;
background-color: blue;
padding: 5px;
transition: all 1s;
}
.link:hover {
width: 300px;
height: 50px;
background-color: red;
padding: 10px;
}
</style>
<a class="link">ボタン</a>よくやりがちなミスとして、transitionを擬似クラスに記載するケースがあります。
そうした場合は以下のように、マウスオーバーしたときはアニメーションするのですが、マウスが外れたときはtransitionのスタイルも外れるため、アニメーションしなくなります。（逆にあえてそのようにしたい場合もありますが。。）
間違いパターン<style>
.link {
width: 100px;
height: 20px;
background-color: blue;
padding: 5px;
transition: all 1s;
}
.link:hover {
width: 300px;
height: 50px;
background-color: red;
padding: 10px;
transition: all 1s;
}
</style>
<a class="link">ボタン</a>