WordPress│エフェクト用の画像2枚だけでループアニメーションを作成する方法

2025.03.172026.10.02

装飾用の画像2枚を重ね、回転と拡大縮小を繰り返す見本です。親要素に高さと配置基準を設け、動く画像が本文へ重ならないようにします。停止チェックとOSの動きを減らす設定に対応します。

停止できる見本

アニメーションを停止

HTMLとCSS

HTMLはカスタムHTMLブロック、CSSは追加CSSまたは子テーマのスタイルシートへ記載します。画像URLは自分のメディアへ変更してください。

<div class="waza-fx-demo"><label><input type="checkbox" class="waza-fx-pause"> アニメーションを停止</label><div class="waza-fx-stage" aria-hidden="true"><img class="waza-fx-rotate" src="https://motoki-design.co.jp/wordpress/wp-content/uploads/fx_image_02.png" alt=""><img class="waza-fx-scale" src="https://motoki-design.co.jp/wordpress/wp-content/uploads/fx_image_01.png" alt=""></div></div>

.waza-fx-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;background:#101820}.waza-fx-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.waza-fx-rotate{animation:waza-fx-turn 80s linear infinite}.waza-fx-scale{animation:waza-fx-pulse 5s ease-in-out infinite alternate}.waza-fx-demo:has(.waza-fx-pause:checked) .waza-fx-stage img{animation-play-state:paused}@keyframes waza-fx-turn{to{transform:rotate(360deg)}}@keyframes waza-fx-pulse{from{transform:scale(.9)}to{transform:scale(1.1)}}@media(prefers-reduced-motion:reduce){.waza-fx-stage img{animation:none}}

画像は装飾なのでaltを空にし、ステージを読み上げ対象から外しています。情報を伝える画像や文字を含む場合は、その内容を別の本文として提供してください。停止操作は:has()対応ブラウザが前提です。