CSS3でアニメーション【vol.2】- マウスホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のtipsは【CSS3でアニメーション【 vol.2 】- マウスホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法】です。全5回に分けてステップアップ式に記事化している第二弾です。すこし長いですがお付き合い頂けましたら幸いです。

ホバーでアニメーションを実行

前回とりあえずはじめの一歩としてキーフレームでのアニメーションについて書きましたが、今回はホバーしたタイミングでアニメーションさせる方法になります。

HTML
<div class="css3-B">CSS3</div>
CSS – 背景及び高さのアニメーション

.css3-B{
transition-property:height,background;
transition-duration:0.5s;
transition-timing-function:ease;
background: #000;
height: 100px;
}
/*下がホバー時に実行するアニメーション*/
.css3-B:hover{
background: #007374;
height: 300px;
}

上では背景及び高さのアニメーションについて説明していますが、基本は他のプロパティでも変わりません。以下では角丸のアニメーションを追加しています。

CSS – 背景色及び角丸のアニメーション

.css3-B{
transition-property:background,border-radius;
transition-duration:0.5s;
background: #000;
}
/*下がホバー時に実行するアニメーション*/
.css3-B:hover{
background: #007374;
border-radius: 100px;
}

複数アニメーションの組み合わせ方法

今回はもう少し深堀りして【複数アニメーションの組み合わせ方法】も書いておきます。組み合わせといっても、正確には特定のアニメーションをdelayで遅延させる実行のタイミングをずらす方法になります。

CSS – 背景色、角丸、高さのアニメーションを遅延実行

.css3-B{
transition-property:background,border-radius,height;
transition-duration:0.5s;
transition-delay:0,0.2s,0.6s;
}
.css3-B:hover{
background: #007374;
border-radius: 100px;
height: 300px;
}

transition-delay:0,0.2s,0.6s;の部分で各アニメーションの実行のタイミングをずらしています。仮にtransition-property:A,B,C;とするならtransition-delay:Aの遅延(秒),Bの遅延(秒),Cの遅延(秒);と記述する事ができます。詳しくはデモをご参照ください。

 
以上になります。