要素を拡大・縮小させるCSSアニメーションサンプル
CSSでテキストや要素を拡大や縮小させるCSSアニメーションのサンプルコードです。
マウスホバーでの拡大・縮小、マウスクリックでの拡大・縮小、animationプロパティでの拡大・縮小などそれぞれの方法のCSSアニメーションの実装パターンを紹介しています。
scale()の使い方と、その他の方法
このページでのサンプルは要素のサイズ変更にscale()を利用して紹介しています。
scale()にて指定できる値は横幅・縦幅の拡縮率を指定します。
transform: scale(2);横幅・縦幅の拡縮率はカンマで区切ることで、それぞれ別々に指定することも可能です。
transform: scale(2, 1);また、scaleX()、scaleY()といった書き方もできます。
transform: scaleX(2);
transform: scaleY(2);scale()を使わない別の方法として、変化の数値としてwidthやheightを指定していく方法も利用可能です。
width: 100px;
height: 100px;また、縮小は問題ありませんが、拡大させた要素が、要素の初期位置がウィンドウの左上に位置した場合などそれ以上スペースがなかった場合、右下に向かって拡大してしまうので注意して下さい。
マウスホバーで要素を拡大・縮小
マウスホバー時に要素を拡大または縮小するCSSアニメーションサンプルです。
左側 青色の四角が拡大（ズームイン）、右側 緑色の四角が縮小（ズームアウト）となっています。
See the Pen CSS Zoom in and out with mouse hover by yochans (@yochans) on CodePen.
HTMLは「zoom-in」「zoom-out」というふたつのクラス名を付けた要素を作成しています。
<div class="container">
<div class="zoom-in"></div>
<div class="zoom-out"></div>
</div>拡大の「zoom-in」縮小の「zoom-out」ともに「transition」で変化した場合のアニメーション時間、「:hover」でマウスホバー時の変化を付けています。
.container {
display: flex; /* 横並び用 */
}
.zoom-in {
margin: 40px;
width: 70px;
height: 70px;
background: #0091EA;
transition: 1s;
}
.zoom-in:hover {
transform: scale(2);
}
.zoom-out {
margin: 40px;
width: 70px;
height: 70px;
background: #00E676;
transition: 1s;
}
.zoom-out:hover {
transform: scale(0);
}クリック長押しで要素を拡大・縮小
クリック長押しで要素を拡大・縮小させる動作サンプルとサンプルのコードです。
この方法は左クリックボタンの長押し（タップ長押し状態）でアニメーションし、クリックが離れると解除されます。
一般的なクリックイベントとは違うのでご注意下さい。
See the Pen CSS Zoom in and out with click by yochans (@yochans) on CodePen.
マウスホバー時と同じくHTMLには「zoom-in」「zoom-out」というふたつのクラス名を付けた要素を作成しています。
<div class="container">
<div class="zoom-in"></div>
<div class="zoom-out"></div>
</div>要素をクリックした時にCSSを反映させる「:active」を利用しています。
.zoom-in {
margin: 40px;
width: 70px;
height: 70px;
background: #0091EA;
transition: 1s;
}
.zoom-in:active {
transform: scale(2);
}
.zoom-out {
margin: 40px;
width: 70px;
height: 70px;
background: #00E676;
transition: 1s;
}
.zoom-out:active {
transform: scale(0);
}animationプロパティを利用して要素を拡大・縮小
より自由度の高いアニメーションを実現するanimationプロパティをつかって要素を拡大・縮小させるパターンです。
See the Pen CSS Zoom in and out with animation by yochans (@yochans) on CodePen.
サンプルでは、animationプロパティにはシンプルに最低限の指定しかしていませんが、無限ループや一時停止など加えていけば好みのアニメーションが実装できます。
<div class="container">
<div class="zoom-in"></div>
<div class="zoom-out"></div>
</div>サンプル用としてマウスホバー（:hover）にanimationプロパティを指定しています。
ページ読み込み時にアニメーションさせる場合は「.zoom-in」または「.zoom-out」の本体側に指定して下さい。
.container {
display: flex; /* 横並び用 */
}
.zoom-in {
margin: 40px;
width: 70px;
height: 70px;
background: #0091EA;
}
.zoom-in:hover {
animation: zoom-in-anim 1s;
}
@keyframes zoom-in-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
.zoom-out {
margin: 40px;
width: 70px;
height: 70px;
background: #00E676;
}
.zoom-out:hover {
animation: zoom-out-anim 1s;
}
@keyframes zoom-out-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}マウスホバー（:hover）にanimationプロパティを指定していますが、マウスホバー時のアニメーション指定であっても本体に「paused」付きで指定しておいて、マウスホバー時に「animation-play-state: running;」を指定した方が使いやすいです。
通常状態では停止させておいて、マウスホバー時にアニメーションさせるといった具合です。
関連記事：CSS | アニメーションの再生・一時停止の指定値と比較 | ONE NOTES
.zoom-in {
margin: 40px;
width: 70px;
height: 70px;
background: #0091EA;
animation: zoom-in-anim 1s paused;
}
.zoom-in:hover {
animation-play-state: running;
}
@keyframes zoom-in-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}ページ読み込み時にアニメーションさせる場合は「.zoom-in」または「.zoom-out」の本体側にanimationを指定ます。
.zoom-in {
margin: 40px;
width: 70px;
height: 70px;
background: #0091EA;
animation: zoom-in-anim 1s infinite;
}
@keyframes zoom-in-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}無限ループを指定する場合は「infinite」を追加します。
.zoom-in {
margin: 40px;
width: 70px;
height: 70px;
background: #0091EA;
animation: zoom-in-anim 1s infinite;
}
@keyframes zoom-in-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}アニメーションの最後で停止させる場合は「forwards」を追加で指定します。
関連記事：CSS | アニメーションを最後の状態で停止させる方法 | ONE NOTES
.zoom-in {
margin: 40px;
width: 70px;
height: 70px;
background: #0091EA;
animation: zoom-in-anim 1s forwards;
}
@keyframes zoom-in-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}アニメーションの完了後に巻き戻す指定をするには「alternate」を追加します。
「alternate」は「infinite」と同時に指定することも可能です。
関連記事：拡大・縮小のCSSアニメーションサンプル | ONE NOTES
.zoom-in {
margin: 40px;
width: 70px;
height: 70px;
background: #0091EA;
animation: zoom-in-anim 1s alternate;
}
@keyframes zoom-in-anim {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}