Zoom-inアニメーションの実装
CSSアニメーションプロパティ
はじめに
概要
このコードは、CSSアニメーションを使用して要素のスケール（大きさ）を変更する方法を定義しています。まず、@keyframes zoom-inでアニメーションのキーフレームを設定し、0%の時点では要素が1.2倍に拡大されており、100%の時点では元の大きさに戻るようにしています。次に、animation: zoom-in 10s linear 0s 1 normal both;というプロパティを使用して、このアニメーションを適用します。ここで、アニメーションの名前をzoom-inとし、持続時間を10秒、進行速度を一定に、開始を即時に、実行回数を1回に設定しています。また、アニメーションの再生方向を通常の開始から終了にし、アニメーションの適用中と終了後に初期状態と終了状態の両方を維持するようにしています。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
実装内容
動画
CSSアニメーションを使用し、上記のようなアニメーションを実装します。
コード
keyframes
@keyframes zoom-in {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}解説
- @keyframes:
@keyframesは、CSSアニメーションの中核を成すもので、アニメーションの途中でどのようにスタイルが変化するかを定義します。
- zoom-in:
- これはアニメーションの名前です。後でCSSでこの名前を使ってアニメーションを要素に適用します。
- 0% と 100%:
- アニメーションの進行を示すキーとなるポイントです。ここでは
0%がアニメーションの開始点、100%が終了点を示しています。
- アニメーションの進行を示すキーとなるポイントです。ここでは
- transform: scale():
transformプロパティは、要素を変形させるために使います。scale()関数は要素のサイズを変更します。例えば、scale(1.2)は要素を120%の大きさに、scale(1)は元の大きさにします。
このコードがすること
- 開始時 (0%):
- 要素は通常のサイズの120%にスケールアップされています。つまり、元のサイズよりも少し大きくなっています。
- 終了時 (100%):
- 要素は元のサイズ (
scale(1)) に戻ります。
- 要素は元のサイズ (
CSS
.swiper-slide img {
/* img要素に以下のアニメーションプロパティが適用されます: */
animation: zoom-in 10s linear 0s 1 normal both;
/*
- zoom-in: 適用するアニメーションの名前。
- 10s: アニメーションの持続時間は10秒。
- linear: アニメーションは一定の速度で進行します。
- 0s: アニメーションが開始するまでの遅延時間はなし。
- 1: アニメーションは1回再生されます。
- normal: アニメーションは正方向に再生されます。
- both: アニメーションのプロパティがアニメーション中および終了後も適用されます。
*/
}- アニメーション名 (
zoom-in)- アニメーションの名前。対応する
@keyframesルールを定義する必要があります。 - 例：cssコードをコピーする
@keyframes zoom-in { 0% { transform: scale(0); } 100% { transform: scale(1); } }
- アニメーションの名前。対応する
- 継続時間 (
10s)- アニメーションの実行時間。ここでは10秒。
- タイミング関数 (
linear)- アニメーションの進行速度。
linearは一定速度を意味する。 - 他の例：
ease,ease-in,ease-out
- アニメーションの進行速度。
- 遅延時間 (
0s)- アニメーションが開始するまでの遅延時間。ここでは0秒（遅延なし）。
- 再生回数 (
1)- アニメーションの再生回数。ここでは1回のみ再生。
- 他の例：
infinite（無限に繰り返す）
- アニメーション方向 (
normal)- アニメーションの進行方向。
normalは通常の順序で進行。 - 他の例：
reverse（逆方向）
- アニメーションの進行方向。
- 適用方法 (
both)- アニメーションの開始前と終了後の状態をどのように保持するか。
bothは両方を保持。 - 他の例：
forwards（終了後の状態を保持）,backwards（開始前の状態を保持）
- アニメーションの開始前と終了後の状態をどのように保持するか。
実装例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes zoom-in {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
img {
animation: zoom-in 10s linear 0s 1 normal both;
}
</style>
</head>
<body>
<img src="https://picsum.photos/1000/500?random=3" alt="">
</body>
</html>
まとめ
- CSSのアニメーションプロパティで実装ができる
- @keyframesでアニメーションを定義する
- javascriptなど難しい設定は必要がない
- 様々なオプションが準備されている
- フェードインアニメーションと組み合わせると、表現の幅が広がる。