自作ホームページの奨め

有限会社安房ネット

カルーセル（回転木馬）

ベクトル図形(svg)１８個を、div要素で描いた矩形に入れて横に並べています。
スタイルシート（css）のアニメーションで、３０秒かけて全体が外にでるまで 左側に移動させ、これを繰り返しています。
右端が画面内に入ってきた時、後が切れるのを防ぐため、全体を直ぐ右側に複製しています。
アニメーションは、スタイルシートだけで行っており、 ジャバスクリプト（js）は、全体を複製するための１行だけになっています。