ブログサイトでアイキャッチ画像にマウスを合わせると、画像が拡大するアニメーションがあります。

CSS3の「transform:」を使うことで、比較的簡単にアニメーション効果を実現できます。そんな訳で今回はCSS3を使って画像をロールオーバーした時に画像が拡大するアニメーションの備忘録

「transition:」と「transform:」を設定

「transform: scale();」プロパティを設定して、拡大させて
「transition: transform」でアニメーション速度の設定をします。

【HTML】

<div class="scale_anime">
<img src="img/img01.jpg" alt="大きくなる画像"/>
</div>

拡大しても、横と縦幅が動かさないために＜img＞を＜div＞で囲ってます。

【CSS】

.scale_anime {
width: 300px;
height: 300px;
overflow: hidden;
}

.scale_anime img {
width: 100%;
}

.scale_anime img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-moz-transition: -moz-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
-o-transition: -o-transform 0.3s;
-ms-transition: -ms-transform 0.3s;
transition: transform 0.3s;
}

「拡大」と「回転」のアニメーションの組み合わせ

拡大は「scale」で、回転は「rotate」で指定できます。2つの変形を組み合わせるのは以下の様な記述でできるようです。

.scale_anime02 img:hover {
-webkit-transform: scale(1.5) rotate(20deg);
-moz-transform: scale(1.5) rotate(20deg);
-o-transform: scale(1.5) rotate(20deg);
-ms-transform: scale(1.5) rotate(20deg);
transform: scale(1.5) rotate(20deg);
}

「deg」は「角度」の単位。今回は20度傾かせる感じ

2つの種類のアニメーションのDEMOは以下

DEMO

まとめ

ブラウザ対応を考えると、アニメーションといえばjQuery が一般的で、CSSのtransformのプロパティは、あまり今まで触ってなかったんですが、これを機に理解度を深めていきたいと思います。「t」で始まる単語が多すぎてこんがらがりそうですが・・・今回は以上ですm(_ _)m