Blog

CSS3でドミノ倒しみたいにテキストが倒れていくアニメーション

2014.07.01Cat:css3 デザイナー

サンゲツの電子カタログのページで、

カタログを読み込むときに使われている、テキストのCSS3アニメーションが面白かったので、

少しアレンジして作ってみました。

 

↓コチラが作ってみたもの

DEMO

 

方法

今回はCSS3のanimationとtransformのrotateを使っています。

ポイントは、テキストを全体ではなくそれぞれ回転させるため、

テキストの一文字一文字をspanで囲うことです。

さらに、spanはインライン要素のため、そのままではtransformが効かないので、

「display:inline-block」を指定しています。

 

HTML

 

CSS

さらに、それぞれのspanを「-webkit-animation-delay」を使ってアニメーションを少しずつずらし、

ドミノ倒しみたいな感じを出してみました。

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧

越境ECの最新情報

人気の記事

越境EC関連の記事

月から探す

ページTOPへ