CSS3でアニメーション【vol.2】- マウスホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんにちは。Toshikuraです。今回のtipsは【CSS3でアニメーション【 vol.2 】- マウスホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法】です。全5回に分けてステップアップ式に記事化している第二弾です。すこし長いですがお付き合い頂けましたら幸いです。
- 【vol.1】- とりあえずはじめの一歩。
- 【vol.2】- ホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法
- 【vol.3】- イージングを生成してくれる便利なジェネレーター
- 【vol.4】- クリックでアニメーションを実行させる方法(複数同時実行例含む)
- 【vol.5】- ちょっと複雑なアニメーションを作ってみる。
- 【vol.6】- CSS3アニメーションで動作するjQueryスライダーを作ってみる
- 【vol.7】- jQueryでCSS3アニメーションの終了のタイミングを取得する方法
ホバーでアニメーションを実行
前回とりあえずはじめの一歩としてキーフレームでのアニメーションについて書きましたが、今回はホバーしたタイミングでアニメーションさせる方法になります。
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の遅延(秒);と記述する事ができます。詳しくはデモをご参照ください。