transitionプロパティでアニメーション変形

cssのtransitionプロパティを利用すると、cssプロパティの値をアニメーションによって変化させることができます。いくつか利用例を紹介します。

幅と背景色をアニメーションで変形

html

<div class="transition_target1">幅と背景色をアニメーションで変形</div>

css

.transition_target1 {
    background-color: #81D674; 
    width: 250px;
    height: 100px;
    -moz-transition: 1s ease; 
    -webkit-transition: 1s ease; 
    transition: 1s ease; 
}   
 
.transition_target1:hover {
    background-color: #EDA184;
    width: 500px;
}

動作確認

See the Pen transition1 by waku-waku (@raku-raku) on CodePen.

補足

背景色が緑色からオレンジ色にアニメーションで変化しています。また、幅が250pxから500pxにアニメーションで変化しています。

transitionプロパティでは、 変化にかかる秒数変化の仕方 を指定しています。

幅だけをアニメーションで変形

HTML

<div class="transition_target2">幅だけをアニメーションで変形</div>

CSS

.transition_target2 {
    background-color: #81D674; 
    width: 250px;
    height: 100px;
    -moz-transition: width 1s ease; 
    -webkit-transition: width 1s ease; 
    transition: width 1s ease; 
}   
 
.transition_target2:hover {
    background-color: #EDA184;
    width: 500px;
}

動作確認

See the Pen transition2 by waku-waku (@raku-raku) on CodePen.

補足

transitionプロパティでwidthプロパティだけがアニメーションの対象となるように設定しています。

利用例1では、何も指定していなかったので幅と背景色がアニメーションによって変化しました。

利用例2では、widthを指定しているため、幅だけがアニメーションによって変化し、背景色は一瞬で変化します。

わくわくBank.
フリーランスのエンジニアとして活動してます。ここでは、ソフトウェア開発で必要とされる技術、用語、概念を整理しています。