TECH BOX

Technology blog from Web Engineer

この記事は最終更新日から7年以上経過しているため正確ではないかもしれません

CSS3のみで時間差を使いアニメーションを作成する

受託案件ではあまりやりませんが、考え方の一つして親要素と子要素を時間差でアニメーションをさせてあたかも複雑な動きを行っているように見せることができます。

簡単な例↓

See the Pen CSS3 Time Lag Animation by Nobuyuki Kondo (@artprojectteam) on CodePen.0

上記の場合は親要素のanimationと子要素のanimationのdurationをずらすことによって(親要素のdurationを3s、子要素のdurationを2.6sなど)、複雑な動きをしているように見えます。

アニメーションで困ったときは、単体のみで全部を処理しようとせず、こういった考え方もあるということを知っておけば幅は広がると思います。