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

2022/11/17

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;
}