scale コマンドを利用した要素の拡大、縮小アニメーション - CSS
CSSで scale コマンドを利用した要素の拡大、縮小アニメーションを紹介します。
概要
CSSのアニメーションで要素を拡大、縮小する場合には scale コマンドを利用します。
書式
animationプロパティの書式は次の通りです。詳しくは
こちらの記事を参照してください。
animation: (キーフレーム名) (アニメーション時間) (イージング);
animation: (キーフレーム名) (アニメーション時間) (イージングの種類) (アニメーション開始時間) (アニメーション回数) (アニメーションの方向)
メモ
イージングの種類については
こちらの記事を参照してください。
scale コマンドはキーフレーム内で指定しますキーフレームの書式は次の通りです。
@keyframes (キーフレーム名) {
0% {
transform: scaleX(拡大/縮小率);
}
nn% {
transform: scaleX(拡大/縮小率);
}
100% {
transform: scaleX(拡大/縮小率);
}
}
scaleY, scaleZ の場合も同様の書式です。複数のコマンドを適用する場合にはスペースで区切ります。
@keyframes (キーフレーム名) {
0% {
transform: scaleX(拡大/縮小率) scaleY(拡大/縮小率) scaleZ(拡大/縮小率);
}
nn% {
transform: scaleX(拡大/縮小率) scaleY(拡大/縮小率) scaleZ(拡大/縮小率);
}
100% {
transform: scaleX(拡大/縮小率) scaleY(拡大/縮小率) scaleZ(拡大/縮小率);
}
}
scaleコマンドの場合は、次の書式になります。
@keyframes (キーフレーム名) {
0% {
transform: scale(拡大/縮小率);
}
nn% {
transform: scale(拡大/縮小率);
}
100% {
transform: scale(拡大/縮小率);
}
}
@keyframes (キーフレーム名) {
0% {
transform: scale(横方向の拡大/縮小率, 縦方向の拡大/縮小率);
}
nn% {
transform: scale(横方向の拡大/縮小率, 縦方向の拡大/縮小率);
}
100% {
transform: scale(横方向の拡大/縮小率, 縦方向の拡大/縮小率);
}
}
プログラム例1:縮小/拡大
要素の拡大、縮小をする場合は
scale コマンドを利用します。
コード
下記のHTML、CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ScaleSimple01.css" />
<script type="text/javascript">
function onButtonClick() {
var elem = document.getElementById('char01');
elem.classList.add("charmove");
}
</script>
</head>
<body>
<div class="Field">
<img id="char01" class="charimg" src="char.svg" />
</div>
<button onclick="onButtonClick();">Start</button>
</body>
</html>
body {
background-color:#F0F0F0;
}
.Field {
background-color:#FFFFFF;
border: 1px solid #808080;
width:600px;
height:280px;
margin: 2rem 2rem 2rem 2rem;
}
.charimg {
width:240px;
}
.charimg.charmove {
animation: moveframe 2s linear;
}
@keyframes moveframe {
0% {
transform: scale(100%);
}
100% {
transform: scale(10%);
}
}
なお、SVG画像は下記の画像を用意しました。
<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240.11 240.11">
<defs>
<style>.cls-1{fill:#87d0f2;}.cls-2{fill:#231815;}.cls-3{fill:#fff;}.cls-4{fill:none;}.cls-4,.cls-5{stroke:#231815;stroke-miterlimit:10;stroke-width:2px;}.cls-5{fill:#ffed43;}</style>
</defs>
<circle class="cls-1" cx="120.54" cy="120.21" r="119.06"/><ellipse class="cls-2" cx="70" cy="91.76" rx="6.04" ry="9.43"/>
<ellipse class="cls-2" cx="170.12" cy="91.76" rx="6.04" ry="9.43"/><path class="cls-3" d="M93.5,154.68C73,154.68,36.13,194.2,44,206.74c6.46,10.27,37.74,55.77,100.76,55.61,61.29-.15,94.27-45.47,99.13-54.06,7.78-13.7-24.56-53.61-49.56-53.61Z" transform="translate(-24.23 -23.09)"/>
<circle class="cls-4" cx="120.06" cy="120.06" r="119.06"/>
<ellipse class="cls-5" cx="119.78" cy="129.63" rx="53.87" ry="20.83"/>
</svg>
解説
アニメーションの動作を @keyframes で定義します。 0%の時点は
transform: scale(100%); を指定し、元の大きさのサイズとします。
100%の時点で
transform: scale(10%); を指定し、10%のサイズに縮小します。
アニメーションの設定はサブクラスに記述します。CSSのサブクラスの詳細については
こちらの記事を参照してください。
.charimg {
width:240px;
}
.charimg.charmove {
animation: moveframe 2s linear;
}
実行結果
上記のHTMLファイルを表示します。下図のページが表示されます。
[Start]ボタンをクリックします。画像の縮小のアニメーションが始まります。
10%のサイズまで縮小され、縮小アニメーションが終了すると元のサイズに戻ります。
プログラム例2:縦横で比率が異なる縮小/拡大
CSSの
@keyframes 部分を下記のコードに変更します。
scaleコマンドの第一引数にX方向の比率、第二引数にY方向の比率を指定します。
@keyframes moveframe {
0% {
transform: scale(100%,100%);
}
100% {
transform: scale(10%,25%);
}
}
表示結果
修正後にWebブラウザでページを表示します。下図のページが表示されます。
[Start]ボタンをクリックします。キャラクターの画像の縮小アニメーションが始まります。
アニメーションが終了すると、最初の状態に戻ります。
プログラム例3:横方向の縮小/拡大
CSSの
@keyframes 部分を下記のコードに変更します。
横方向に拡大や縮小する場合はscaleXコマンドを利用します。
@keyframes moveframe {
0% {
transform: scaleX(100%);
}
100% {
transform: scaleX(10%);
}
}
表示結果
修正後にWebブラウザでページを表示します。下図のページが表示されます。
[Start]ボタンをクリックします。横方向の縮小アニメーションが始まります。
アニメーションが終了すると画面の表示は、最初の状態に戻ります。
プログラム例4:縦方向の縮小/拡大
CSSの
@keyframes 部分を下記のコードに変更します。
縦方向に拡大や縮小する場合はscaleYコマンドを利用します。
@keyframes moveframe {
0% {
transform: scaleY(100%);
}
100% {
transform: scaleY(10%);
}
}
表示結果
修正後にWebブラウザでページを表示します。下図のページが表示されます。
[Start]ボタンをクリックします。縦方向の縮小アニメーションが始まります。
アニメーションが終了すると画面の表示は、最初の状態に戻ります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
