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アプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ