#31 今週作ったCSSアニメーション 【ぴよぴよコーダーの開発日記】

旅行に行きたくても、新型コロナの影響でお外に行けないので、車窓からの風景がひたすら進行方向と逆向きにながれていくCSSアニメーションを作ってみた。

作り方としては、background-positionを少しずつ進行方向分ずらしていくというもの。background画像は、基本的に繰り返すので、infiniteをつけると永遠に繰り返すことができる。

工夫したところといえば、background画像は、基本的に繰り返すといっても縦にも横にも繰り返すので、横だけ繰り返すよう、repeat-xを追加したところと、背景の山の画像は、中途半端に区切ると、山が途中で切れてしまうように繰り返されるので、途中で区切れないような配置で描いたところ。

お絵描きソフトはibis paintでiPadで描きました。

参考：CSS3でつくれちゃうアニメーション！ループして流れる雲

参考：写真が画面の端から端へ流れる無限ループするアニメーション

参考：SHALL WE CAMP?