備忘録　CSSのアニメーションで物体を上下に少し動きをつけて水平移動させる方法

こんにちは

MaromaroのTakaです。

今回は備忘録としてCSSのアニメーションで要素を上下に動かしながら水平移動させる方法を記載します。

アニメーションについては色々と方法はあると思いますが、
今回は簡単にCSSのアニメーションで対応する方法です。

私が対応した案件で鳥を水平に移動させる必要がありました。

ただ水平にアニメーションさせるだけだと以下の様になります。

これはcircleクラスに対して、animationでleftの値を弄っているだけです。

これを自然に上下させながら動かす場合、
水平に動かす要素と上下に動かす要素を分けると良い感じになります。
要は囲んでいる要素を水平に動かし内包している赤丸を上下に動かすイメージです。

その場合以下のようになります。

circleクラス内のspanに対しtranslateのY方向を正から負にアニメーションするように設定することで、
自然なゆらゆらを表現することが出来ました。
単体のクラスに対して行おうとするとやや煩雑といいますか、
挙動がカクカクするので、この方法はオススメです。

もし上下の移動量を変更する場合はtranslateの値を変更してください。

以上Takaでした。