※当サイトにはプロモーションが含まれています。
ホームページやランディングページ（LP）、セールスページ（SP）などで、画像に動きを付けることで、ユーザの目を引くことができます。
例えば、最近、目にすることがあったのが、下記のようなアニメーションです。
今回は、写真や手配書？など、左右に動きを付けることで、ユーザの目をひくアニメーションをCSSで作成してみました。
揺りかごのように画像が揺れるCSSアニメーション
揺りかごのように画像が揺れるアニメーションのHTMLとCSSです。
HTML
<div class="nya-pin-container">
<div class="nya-pin"></div>
<img src="（画像のURL）" alt="（画像の説明）" class="nya-pin-image">
</div><div class=”nya-pin”>の部分で、ピン（画鋲）を描画しています。
もし、ピン（画鋲）が不要であれば、<div class=”nya-pin”></div>の部分は削除してください。
CSS
.nya-pin-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.nya-pin {
width: 20px;
height: 20px;
background: radial-gradient(circle at top left, #ff6666, #cc0000);
border-radius: 50%;
position: absolute;
top: -10px;
z-index: 10;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
}
.nya-pin-image {
width: 250px;
display: block;
transform-origin: top center;
animation: nya-swing 3s ease-in-out infinite alternate;
}
@keyframes nya-swing {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}@keyframesを使用して、-5degから5degへ左右に揺れるアニメーションを定義しています。
また、クラスnya-pin-imageのアニメーション部分では、
- nya-swing → キーフレーム名
- 3s → アニメーション時間
- ease-in-out → アニメーションの動き
- infinite → 無限ループ
- alternate → アニメーションの方向を切り替え（右⇔左）
を設定しています。
そして、これらを記述すると、下記のように画像を揺りかごのように左右に揺らすアニメーションを作成できます。
最後に、動作確認用として、HTMLとCSSをまとめたものも掲載しておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ピン止め写真の揺れアニメーション</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.nya-pin-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.nya-pin {
width: 20px;
height: 20px;
background: radial-gradient(circle at top left, #ff6666, #cc0000);
border-radius: 50%;
position: absolute;
top: -10px;
z-index: 10;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
}
.nya-pin-image {
width: 200px;
display: block;
transform-origin: top center;
animation: nya-swing 3s ease-in-out infinite alternate;
}
@keyframes nya-swing {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
</style>
</head>
<body>
<div class="nya-pin-container">
<div class="nya-pin"></div>
<img src="images/photo.png" alt="ピン止め写真" class="nya-pin-image">
</div>
</body>
</html>上記をコピペして動作確認してみてください。
ご支援のお願い
この記事が役に立ったと感じたら･･･
この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。
ご購入いただいた商品の金額の一部が私に入り、より多くの有益な記事を作るための励みになります。