前回の記事ので解説した、ひし形のサムネイルをつくる方法をCSSアニメーションをつかって紙芝居のように説明をしたデモをつくった。

これはCSS TricksのChris Coyier氏が以前にCodpenで公開した、Animation to Explain CSS Triangles という素敵なデモをフォークしてつくった。

Animation to Explain CSS Diamond

コードだけの紹介よりはちょっと理解が深まるかもしれない。

ちなみにアニメーションについては、CodepenをみればJSのコードも確認できるが、ただsetTimeoutでclassを順番に割り当てているだけだ。

こういうのをつくるUIをもったWebサービスがあると流行るかもしれないし、流行らないかもしれない。