TECH BOX

Technology developer's blog

この記事は1年以上経過しています

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


2017年06月30日

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

簡単な例↓

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

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

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

Write a commets