画像を枠のなかで揺らす方法

[神曲] Kawaii EDMオススメ10曲 [まとめ]
https://www.youtube.com/watch?v=lN04a48Ba9I

を見ていたら、気づかない程度に画像が動いていて、WEBでもなんかのときに適用できたら面白いんじゃないかと思い、CSSで行う方法を調べてみました。

See the Pen Image Swing CSS by Akira Ikeda (@akicho8) on CodePen.

HTML(slim)

.swing_container
  .swing_v
    .swing_h
      .swing_rotate
        img(src="path/to/image.png")

CSS(sass)

$swing_level: 10px    // 縦横の移動幅
$swing_rotate: 1deg   // Z軸の回転幅
$swing_scale: 1.15     // 画像の拡大率

.swing_container
  overflow: hidden
  width: 256px

  .swing_v
    animation: kf_translate_x 0.7s ease-in-out infinite alternate

  .swing_h
    animation: kf_translate_y 0.8s ease-in-out infinite alternate

  .swing_rotate
    animation: kf_rotate_z 0.9s ease-in-out infinite alternate

  img
    display: block
    width: 100%
    transform: scale($swing_scale)

@keyframes kf_translate_x
  0%
    transform: translateX(-$swing_level)
  100%
    transform: translateX($swing_level)

@keyframes kf_translate_y
  0%
    transform: translateY(-$swing_level)
  100%
    transform: translateY($swing_level)

@keyframes kf_rotate_z
  0%
    transform: rotateZ(-$swing_rotate)
  100%
    transform: rotateZ($swing_rotate)

まとめると次のようになります。

1. 周期をずらしてX座標、Y座標、Z軸を動かす
2. 画像を少し拡大しておく
3. 親要素で子要素(画像)をクリップする