CSSアニメーションのショートハンドを完全マスター！一行でまとめて書く方法

アニメーションをまとめて制御するショートハンドの使い方

先生と生徒の会話形式で理解しよう

生徒

「ＣＳＳでアニメーションを作ると、コードが何行も続いてしまって読みづらいです。もっとスッキリ書く方法はありますか？」

先生

「そんなときは、ショートハンドという書き方が便利ですよ。バラバラに書いていた命令を、一行にギュッとまとめることができるんです。」

生徒

「一行にまとめても、ちゃんと動くんですか？」

先生

「もちろんです！書き方のルールさえ覚えれば、プロのような綺麗なコードになりますよ。詳しく見ていきましょう！」

1. アニメーションをまとめて書くショートハンドとは

ウェブサイトに動きをつけるＣＳＳアニメーション。普通に書くと、アニメーションの名前、動く時間、加速の仕方、繰り返しの回数など、たくさんの命令を一つずつ書く必要があります。これでは、コードがどんどん長くなってしまいますよね。

そこで便利なのが「ショートハンド（ｓｈｏｒｔｈａｎｄ）」です。日本語では「短縮記法」とも呼ばれます。これは、複数の設定をスペースで区切って一列に並べるだけで、ブラウザに全ての命令を伝えることができる魔法のような書き方です。

プログラミング未経験の方にとって、コードが長くなるのは混乱の元です。ショートハンドを使うことで、見た目がスッキリし、後から内容を確認するのも楽になります。パソコンの操作に慣れていない方こそ、このスマートな書き方を覚えて効率よくサイト制作を進めていきましょう。

2. ショートハンドを使わないバラバラな書き方

まずは、ショートハンドを使わずに一つずつ丁寧に命令を書いた場合の例を見てみましょう。これを「個別指定」と呼びます。一つ一つの役割がはっきりしているので最初は分かりやすいですが、やはり行数が多くなってしまいます。

例えば、名前を指定する命令、時間を決める命令、動きのリズムを決める命令をそれぞれ別の行に書きます。これを修正しようとすると、複数の行を書き換えなければならず、手間がかかります。実際の現場では、これらをまとめて管理するのが一般的です。


<style>
	.box-normal {
	    width: 100px;
	    height: 100px;
	    background-color: #ffc107;
	    /* 一つずつバラバラに書く方法 */
	    animation-name: moving;
	    animation-duration: 2s;
	    animation-timing-function: ease-in-out;
	    animation-iteration-count: infinite;
	}

	@keyframes moving {
	    0% { transform: translateX(0); }
	    100% { transform: translateX(100px); }
	}
</style>

<div class="box-normal rounded shadow"></div>
<p>これはバラバラに書いたアニメーションです</p>

ブラウザ表示

3. アニメーションを一行に凝縮する魔法のルール

さて、いよいよ本題のショートハンドの書き方です。「ａｎｉｍａｔｉｏｎ」という一つの命令の後ろに、設定したい値を順番に並べていくだけで完成します。これを覚えると、先ほど４行使っていたコードが、たった１行になります。

基本的な順番は「名前」「時間」「リズム」「繰り返し」といった形になります。実は、この順番は厳密に決まっているわけではありませんが、慣習として使いやすい並びがあります。特に大切なのは「時間」を早めに書くことです。

初めてパソコンでコードを打つ方は、半角スペースを入れるのを忘れないように注意してください。文字がくっついてしまうと、コンピューターが命令を読み取れなくなってしまいます。一つ一つの言葉をスペースで区切るのが、ショートハンドの鉄則です。


<style>
	.box-short {
	    width: 100px;
	    height: 100px;
	    background-color: #0dcaf0;
	    /* 名前・時間・リズム・繰り返しの順で一行に！ */
	    animation: moving 2s ease-in-out infinite;
	}

	@keyframes moving {
	    0% { transform: scale(1); }
	    100% { transform: scale(1.2); }
	}
</style>

<div class="box-short rounded-circle shadow"></div>
<p>一行にまとめたショートハンドの動きです</p>

ブラウザ表示

4. 設定値の意味を初心者向けに優しく解説

ショートハンドで並べる言葉には、それぞれ重要な役割があります。まずは「名前」。これはアニメーションの台本である「＠ｋｅｙｆｒａｍｅｓ」につけた名前のことです。次に「時間」。例えば「２ｓ」と書けば２秒かけて１周します。

そして「リズム（タイミング関数）」。これは動きの緩急を決めます。「ｌｉｎｅａｒ（リニア）」なら一定の速さ、「ｅａｓｅ（イーズ）」なら最初と最後がゆっくりになります。この設定一つで、アニメーションの質感がガラリと変わります。

最後に「繰り返し」。ずっと動かしたいなら「ｉｎｆｉｎｉｔｅ（インフィニット）」、１回だけなら「１」と書きます。これらを一行に詰め込むことで、ブラウザは「ああ、この名前の台本をこれくらいの速さでこんな風に繰り返せばいいんだな」と理解してくれるのです。まるでレストランで「Ａランチを一つ！」と注文するような手軽さですね。

5. 待ち時間を追加するディレイの設定方法

アニメーションが始まるときに、少し間を置いてから動かしたいこともありますよね。この「待ち時間」のことを「ディレイ（ｄｅｌａｙ）」と呼びます。ショートハンドの中に秒数を二つ書くと、最初の数字が「動く時間」、二番目の数字が「待ち時間」として認識されます。

例えば「２ｓ　１ｓ」と書くと、ページを読み込んでから１秒待って、２秒かけてアニメーションが実行されます。この待ち時間を上手に使うことで、複数の要素が順番に現れるような、リズム感のある演出が可能になります。

順番が入れ替わると意図しない動きになることもあるので、まずは「時間は左から、実行時間、待ち時間の順」と覚えておきましょう。これがわかると、さらに高度なサイト作りが楽しくなります。


<style>
	.box-delay {
	    width: 100px;
	    height: 100px;
	    background-color: #6610f2;
	    /* 名前・実行時間(2秒)・リズム・待ち時間(1秒)・繰り返し */
	    animation: slide 2s linear 1s infinite;
	}

	@keyframes slide {
	    0% { transform: rotate(0deg); }
	    100% { transform: rotate(360deg); }
	}
</style>

<div class="box-delay rounded shadow"></div>
<p>1秒待ってから回転が始まります</p>

ブラウザ表示

6. 逆再生や往復を可能にする方向の指定

アニメーションは通常、最初から最後に向かって動きます。しかし、終わりから最初へ逆戻りさせたり、行ったり来たりさせたりすることもできます。これを決めるのが「ディレクション（ｄｉｒｅｃｔｉｏｎ）」という設定です。

「ａｌｔｅｒｎａｔｅ（オルタネイト）」という言葉をショートハンドに追加すると、一回終わった後に逆方向に動き出し、往復運動を繰り返すようになります。振り子のような動きを作りたいときにぴったりです。

ショートハンドなら、この複雑な英単語も末尾にひょいっと付け足すだけで反映されます。バラバラに書くよりも、追加や削除がしやすくなるのもショートハンドの大きなメリットです。自分の好きな言葉をどんどん組み合わせて、思い通りの動きを探してみましょう。

7. アニメーション終了時の状態をキープする方法

アニメーションが終わった瞬間に、最初の状態にパッと戻ってしまうのを防ぎたいときがありますよね。例えば、フェードインして現れた後、そのまま表示し続けてほしい場合です。これには「フィルモード（ｆｉｌｌ－ｍｏｄｅ）」という命令を使います。

ショートハンドの中に「ｆｏｒｗａｒｄｓ（フォワード）」と書き加えると、アニメーションが終わった最後の状態のまま止まってくれます。逆に「ｂａｃｋｗａｒｄｓ（バックワード）」は開始前の状態を維持します。これを使いこなせると、アニメーションの質がぐんと上がります。

初心者のうちは、この「終わった後に戻ってしまう現象」に悩むことが多いですが、ショートハンドの一番後ろに「ｆｏｒｗａｒｄｓ」とお守りのように付けておくだけで解決できることも多いですよ。実際のコードで試してみましょう。


<style>
	.box-keep {
	    width: 100px;
	    height: 100px;
	    background-color: #fd7e14;
	    /* 2秒かけて下に動き、そのままの場所で止まる */
	    animation: drop 2s ease forwards;
	}

	@keyframes drop {
	    from { transform: translateY(0); }
	    to { transform: translateY(50px); }
	}
</style>

<div class="box-keep rounded shadow"></div>
<p>アニメーションが終わっても戻りません</p>

ブラウザ表示