背景画像は右起点にじゃないぞ。divを３つ重ねるんだ。まず、背景用div。backgroundで背景にしたい画像を指定して、widthを105vwにする。このdivを最初left-3vw(厳密にはtranslate3d(-3%, 0, 0))からleft0vw(厳密にはtranslate3d(0, 0, 0))にしてtransitionでアニメーションを実装する。これで左から右に画像がゆっくり流れる動き。次に、この画像自体の横幅を固定するdiv。position:absoluteでtop0、left0。width100vw、height100vhでフルスクリーンに固定。これを置かないと３つ目のdivのwidth操作ができなくなる。最後に、横幅可変のdiv。このdivのwidthとz-indexを操作して、切り替えのアニメーション。親要素の幅を動かしつつ、子要素の幅を固定することでマスクアニメーションができる。
なるほど、ありがとうごござます！
2 件の回答
背景画像は右起点にじゃないぞ。divを３つ重ねるんだ。
まず、背景用div。backgroundで背景にしたい画像を指定して、widthを105vwにする。このdivを最初left-3vw(厳密にはtranslate3d(-3%, 0, 0))からleft0vw(厳密にはtranslate3d(0, 0, 0))にしてtransitionでアニメーションを実装する。これで左から右に画像がゆっくり流れる動き。
次に、この画像自体の横幅を固定するdiv。position:absoluteでtop0、left0。width100vw、height100vhでフルスクリーンに固定。これを置かないと３つ目のdivのwidth操作ができなくなる。
最後に、横幅可変のdiv。このdivのwidthとz-indexを操作して、切り替えのアニメーション。
親要素の幅を動かしつつ、子要素の幅を固定することでマスクアニメーションができる。
なるほど、ありがとうごござます！