「まわる」は、ひとつの動きではなかった。
ただ回る。誰かのまわりを回る。止まるために回る。揺れながら回る。中心へ吸い込まれて回る。
言葉だけでは違いが曖昧だったので、JavaScriptで20種類を動かしてみた。押すと再生できて、コードもそのままコピーできる実験ページにした。
回転に意味を足す
最初は、丸を回せば「まわる」になると思っていた。
でも、一定速度ならローディングになる。中心のまわりを動けば衛星になる。減速すればルーレットになる。行って戻れば、迷いか呼吸のように見える。
動きは、形より先に意味を連れてくる。
最初に使いたい四つ
使い道がすぐ見えたのは、この四つだった。
- ただ回る：読み込み中、継続、循環。
- まわりを回る：中心に人や作品を置きたいとき。
- 止まるために回る：抽選、決定、着地。
- 手についてくる：マウスや指に反応する、小さな遊び。
派手な動きは、長く見せると疲れる。何度も見るUIなら短く、静かにする。回転を使う理由がないなら、止めておくほうがいい。
コードをコピーして、すぐ動かす
実験ページでは、カードを押すと再生する。もう一度押せば最初から見られる。各カードの「コードをコピー」を押すと、HTMLとCSSをそのまま持ち出せる。
<div class="spin"></div>
<style>
.spin {
width: 72px;
height: 72px;
border-radius: 50%;
background: conic-gradient(#d8ff52, #ff7b67, #78d7ff, #d8ff52);
animation: spin 1.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>まずは速度を変える。次に linear を ease-in-out にする。それだけで、同じ一周が別のものになる。
動きは、名前をつけると使いやすい
「なんか回ってる」だけでは、次に頼むとき困る。
Orbit、Pendulum、Vortex、Yoyo。動きの名前があると、AIにもデザイナーにも伝えやすくなる。完成品を作る前に、動きだけを並べて眺める。この順番は意外と使える。
今回の実験ページは、ライブ表示とコードコピーを並べる Zap CodeのCSS Animation Playground と、アニメーションを選んで試せる MotionZync を参考にした。
