CSSアニメーションのショートハンドプロパティ「animation」の使い方を解説
CSSアニメーションのショートハンドプロパティとは
アニメーション関連のすべてのプロパティを一括で設定できるのが、ショートハンド（省略記法）プロパティの animation です。このプロパティを使うことで、アニメーションの再生時間（duration）やアニメーション名（name）、タイミング関数、遅延時間、繰り返し回数などを、1行でまとめて指定できます。
animationプロパティで設定できる主な値
- animation-name：適用する@keyframesの名前
- animation-duration：アニメーション1回分の再生時間
- animation-timing-function：速度の変化パターン（ease、linearなど）
- animation-delay：アニメーション開始までの遅延時間
- animation-iteration-count：繰り返し回数
ショートハンドプロパティの実装例
以下のコードを実行して、animationショートハンドプロパティの動作を確認してみましょう。この例では、黄色いボックスが2秒かけて緑から青へと背景色が変化するアニメーションを設定しています。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation: myanim 2s
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>コードの解説
上記の例では、animation: myanim 2s の部分がショートハンドプロパティによる指定です。「myanim」という名前のアニメーションを2秒間かけて再生することを意味しています。
また、@keyframes ルールでは、アニメーションの開始時点（from）で背景色を緑に、終了時点（to）で青に変化させる動きを定義しています。ページを読み込むと、要素はすぐに緑色へ切り替わり、その後2秒かけて青色へと滑らかに変化します。
ショートハンドプロパティを活用すれば、個別のプロパティを何行にも分けて書く必要がなく、スタイルシートをすっきりと保つことができます。
-
CSSのperspectiveプロパティをアニメーションさせる方法を解説
CSSのperspective（パースペクティブ）プロパティは、3D変換における奥行きの深さを定義するプロパティです。このプロパティにアニメーションを適用すると、視点の距離が変化することで、要素に動的な立体効果を与えることができます。perspectiveプロパティの基本perspectiveプロパティの値が小さいほど視点が要素に近づき、3D効果が強調されます。逆に値が大きいほど、遠くから見たような自然な奥行き表現になります。この値の変化を@keyframesで定義することで、アニメーションとして実装できます。実装例以下は、perspectiveプロパティにCSSアニメーションを適用するサンプ
-
CSSのpadding-topプロパティでアニメーションを実行する方法
CSSでは、padding-topプロパティもアニメーションの対象にすることができます。@keyframesルールの中でpadding-topの値を変化させることで、要素の上側の余白が滑らかに動くアニメーションを作成できます。実装のポイントアニメーションさせたい要素にanimationプロパティを設定します。@keyframes内で、進行度（例：30%）の時点でのpadding-topの値を指定します。アニメーション時間や繰り返し回数は自由に調整可能です。サンプルコード以下のコードでは、3秒間のアニメーションを無限に繰り返し、途中（30%の時点）でpadding-topが60pxまで変化します