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の遅延(秒);と記述する事ができます。詳しくはデモをご参照ください。

　
以上になります。