TECH BOX

Technology developer's blog

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

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

  • 投稿日: 
  • 最終更新日: 

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

簡単な例↓

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

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

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

  • Newer Post
    Coming Soon...
  • Older Post
    This post is most older