#31 今週作ったCSSアニメーション 【ぴよぴよコーダーの開発日記】
旅行に行きたくても、新型コロナの影響でお外に行けないので、車窓からの風景がひたすら進行方向と逆向きにながれていくCSSアニメーションを作ってみた。
作り方としては、background-positionを少しずつ進行方向分ずらしていくというもの。background画像は、基本的に繰り返すので、infiniteをつけると永遠に繰り返すことができる。
工夫したところといえば、background画像は、基本的に繰り返すといっても縦にも横にも繰り返すので、横だけ繰り返すよう、repeat-xを追加したところと、背景の山の画像は、中途半端に区切ると、山が途中で切れてしまうように繰り返されるので、途中で区切れないような配置で描いたところ。
お絵描きソフトはibis paintでiPadで描きました。
参考:CSS3でつくれちゃうアニメーション!ループして流れる雲
参考:写真が画面の端から端へ流れる無限ループするアニメーション
この記事が気に入ったらサポートをしてみませんか?