ウェブデザインでは、ユーザーの目を引き、ページを魅力的に見せるためのさまざまなテクニックがあります。
その中でも、画像アニメーションは、視覚的にインパクトを与える効果的な方法の一つです。
この記事では、CSSを使った画像アニメーションの例をいくつか紹介し、実際にコードを見ていきます。
フェードイン
徐々にフェードインするアニメーションは非常にポピュラーで、視覚的に心地よい効果を与えます。
特にJavaScriptと組み合わせて、ページ読み込み時やスクロール時に使用されます。
コード
<img src="image.jpg" alt="Example Image">/* 初期状態：透明 */
img {
opacity: 0;
animation: fadeIn 2s forwards;
}
/* アニメーション定義 */
@keyframes fadeIn {
to {
opacity: 1;
}
}
opacity
徐々にフェードインする効果をCSSで実現できます。これはopacity（オパシティ）を使ってアニメーションを作ります。
opacityは、CSSで使用されるプロパティで、要素の透明度を設定します。
値は0から1の範囲で指定され、0が完全に透明（見えない状態）、1が完全に不透明（見える状態）を意味します。
opacity: 1;→ 完全に不透明opacity: 0.5;→ 50%の透明度（半透明）opacity: 0;→ 完全に透明（見えない）
@keyframes, animation
@keyframesは、CSSでアニメーションを定義するためのルールです。
アニメーションを作成する際に、アニメーションの開始点から終了点までの状態を指定します。@keyframesを使うことで、アニメーション中に要素がどのように変化するかを段階的に設定できます。
animationプロパティは、@keyframesで定義したアニメーションを要素に適用するために使用します。これを使うことで、指定したアニメーションが実行されるようになります
div {
animation: example 6s infinite; /* 6秒間で繰り返しアニメーション */
}
@keyframes example {
0% {
background-color: red; /* アニメーションの最初の状態 */
}
50% {
background-color: blue; /* アニメーションの途中の状態 */
}
100% {
background-color: yellow; /* アニメーションの最後の状態 */
}
}animationオプション
animation-fill-mode アニメーションが終了した後、最終状態をどうするかを指定します。
infinite: アニメーションを無限に繰り返します。forwards: アニメーションが終了した後、最終的な状態を保持します。backwards: アニメーションが開始する前の状態を保持します。both: アニメーションの開始前と終了後の両方の状態を保持します。
animation-direction: アニメーションが進む方向を制御します
normal: アニメーションが通常の順番（0% → 100%）で進行します。reverse: アニメーションが逆方向（100% → 0%）で進行します。alternate: アニメーションが順方向と逆方向を交互に繰り返します。例えば、最初は0%から100%まで進み、次に100%から0%に戻ります。alternate-reverse: アニメーションが逆方向から始まり、順方向と逆方向を交互に繰り返します。
animation-iteration-count : アニメーションが繰り返される回数を指定するプロパティです。
/* 無限に繰り返す */
element {
animation: example 3s infinite;
}
/* 3回繰り返す */
element {
animation: example 3s 3;
}ズームイン
画像が拡大しながら表示されるズームイン効果はtransformを使って、画像を拡大するアニメーションを作成します。
このアニメーションでは、少しずつ拡大し、最終的に元のサイズになります。
コード
<img src="image.jpg" alt="Zoom In Image">img {
transform: scale(0);
animation: zoomIn 1s ease-in-out forwards;
}
@keyframes zoomIn {
to {
transform: scale(1);
}
}transform
transformは、CSSのプロパティで、要素の形状、位置、回転、スケーリング（拡大・縮小）などを変更するために使います。transformは、要素の視覚的な変化を行い、レイアウトに影響を与えないため、アニメーションやエフェクトに非常に便利です。
主なtransformの値
scale(): 要素のサイズを拡大・縮小します。scale(1)→ 元のサイズ（変更なし）scale(1.5)→ 1.5倍に拡大scale(0.5)→ 半分に縮小
rotate(): 要素を回転させます。角度を指定します。rotate(45deg)→ 45度回転rotate(90deg)→ 90度回転
translate(): 要素を指定した方向に移動させます。translateX(50px)→ 水平方向に50ピクセル移動translateY(100px)→ 垂直方向に100ピクセル移動
skew(): 要素を斜めに歪ませます。skewX(20deg)→ 水平方向に20度歪ませるskewY(30deg)→ 垂直方向に30度歪ませる
matrix(): 2D変形を行うための複雑な方法ですが、通常は他のプロパティ（scale,rotate,translateなど）を使う方が直感的です。
タイミング関数（timing function）
ease-in-out は、アニメーションのスピードを調整するタイミング関数の一つです。これらのタイミング関数を使うことで、アニメーションの動きをコントロールすることができます。
例えば、ease-in を使用すると、アニメーションがスムーズに始まり、加速しながら進行するので、自然で心地よい動きが得られます。一方、linear を使うと、均等に進行するアニメーションが必要な場合に適しています。
ease-in: アニメーションの終了時に動きが遅く、途中から速く進みます。途中は速く動き、最後に遅くなります。ease-out: アニメーションが終わるときに遅く、徐々に速くなります。ease-in-out: アニメーションの最初と最後が遅く、途中が速い動きになります。スムーズに始まり、途中は速く進み、最後はまた遅くなります。linier: アニメーションの動きが一定の速さで進行します。加速も減速もなく、均等に進行します。
スライドイン
画像がページ内にスライドインするアニメーションも、CSSだけで実現できます。transformを使用して、画像を指定した方向からスライドインさせます。
コード
<img src="image.jpg" alt="Slide In Image">img {
transform: translateX(100%);
animation: slideIn 1s ease-out forwards;
}
@keyframes slideIn {
to {
transform: translateX(0);
}
}3D回転アニメーション
画像に3D回転を加えることで、動きのあるインパクトを与えることができます。CSSのtransformを使って、画像を回転させるアニメーションを作成します。
コード
<img src="image.jpg" alt="Slide In Image">img {
transform: rotateY(90deg);
animation: rotate3d 1s ease-out forwards;
}
@keyframes rotate3d {
to {
transform: rotateY(0);
}
}
ドロップシャドウとぼかし効果
画像にぼかしやシャドウを追加して、ビジュアル効果を強調することも可能です。filterを使って、画像に効果を加えることができます。
このコードでは、画像がホバーされたときにぼかし効果がかかり、少し拡大するアニメーションを実現しています。
コード
<img src="image.jpg" alt="Slide In Image">img {
filter: blur(0);
transition: filter 0.3s ease, transform 0.3s ease;
}
img:hover {
filter: blur(5px);
transform: scale(1.05);
}まとめ
これらのアニメーションは、すべてCSSのみで実現可能な効果です。@keyframesやtransitionを駆使することで、ページを視覚的に魅力的にし、ユーザーの注目を集めることができます。
これらのアニメーションを活用することで、軽量でスムーズなユーザー体験を提供できます。
このアニメーションに制御を入れる場合はJavaScriptと合わせて利用します。
