CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像を振動させる方法｜マウスオーバーで揺れるアニメーションの作り方

CSSのアニメーション機能を使えば、JavaScriptに頼らずとも、画像を振動させたり小刻みに揺らしたりする演出を簡単に実装できます。本記事では、:hoverセレクターと@keyframesを組み合わせて、マウスオーバーした瞬間に画像が揺れ始めるアニメーションを作る方法を、実際のコード例とともにわかりやすく解説します。

サンプルコード

以下は、CSSだけで画像をシェイク（振動）させるコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
    width: 400px;
    height: 400px;
    margin:50px;
}
img:hover {
    animation: shakeImg 0.5s;
    animation-iteration-count: infinite;
}
@keyframes shakeImg {
    0% { transform: translate(1px, 1px) rotate(5deg); }
    20% { transform: translate(-3px, 0px) rotate(10deg); }
    30% { transform: translate(3px, 2px) rotate(-10deg); }
    50% { transform: translate(-1px, 2px) rotate(-20deg); }
    70% { transform: translate(3px, 1px) rotate(-25deg); }
    90% { transform: translate(1px, 2px) rotate(10deg); }
    100% { transform: translate(1px, -2px) rotate(-10deg); }
}
</style>
</head>
<body>
<h1>画像にマウスを合わせると揺れます</h1>
<img src="https://i.picsum.photos/id/551/400/400.jpg">
</body>
</html>

実行結果

上記のコードをブラウザで開くと、まずは次のように静止した状態の画像が表示されます。

CSSで画像を振動させる方法｜マウスオーバーで揺れるアニメーションの作り方

画像の上にマウスカーソルを乗せると、以下のように画像が小刻みに揺れ続けます。

CSSで画像を振動させる方法｜マウスオーバーで揺れるアニメーションの作り方

コードのポイント解説

  • img:hover … マウスカーソルが画像に乗ったときだけアニメーションを発火させます。常時アニメーションさせたい場合はimg要素自体に指定してください。
  • animation: shakeImg 0.5s … @keyframesで定義したshakeImgを0.5秒かけて再生します。
  • animation-iteration-count: infinite … アニメーションを無限に繰り返し、揺れを持続させます。
  • @keyframes内のtransform … translate()で位置を細かくずらしながら、rotate()で角度も変化させることで、自然な「震え」の動きを表現しています。

移動量や回転角、再生時間などの数値を調整すれば、揺れの強さやスピードを自由にカスタマイズできます。ボタンやアイコン、注意を引きたいバナーなどにも応用できるので、ぜひ試してみてください。

  1. CSSで画像にボーダー（枠線）を追加する方法

    Webページ上の画像にボーダー（枠線）を追加したい場合、CSSの border プロパティを使うのが最も簡単な方法です。border プロパティは「太さ」「スタイル」「色」の3つの値をまとめて指定できるショートハンド（一括指定）プロパティです。 基本的な書き方 border プロパティは以下のように記述します。 border: 太さ スタイル 色; 例えば border: 8px solid rgb(0, 238, 255); と指定すると、8pxの太さの実線（solid）がシアン系の色で描画されます。 サンプルコード 以下は、CSSを使って画像にボーダーを追加する具体的なコード例です。 &l

  2. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo