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

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

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

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

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

DEMO

方法

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

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

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

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

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

 

HTML

HTML

XHTML

<h1><span>読</span><span>み</span><span>込</span><span>ん</span><span>で</span><span>い</span><span>ま</span><span>す</span></h1>

1	<h1><span>読</span><span>み</span><span>込</span><span>ん</span><span>で</span><span>い</span><span>ま</span><span>す</span></h1>

 

CSS

CSS

CSS

h1 span{ display: inline-block; -animation: rolltext 3s ease-in-out 0s infinite normal; -webkit-animation: rolltext 3s ease-in-out 0s infinite normal; -moz-animation: rolltext 3s ease-in-out 0s infinite normal; opacity: 1; } h1 span:nth-child(1){ -webkit-animation-delay: 0.1s; } h1 span:nth-child(2){ -webkit-animation-delay: 0.2s; } h1 span:nth-child(3){ -webkit-animation-delay: 0.3s; } h1 span:nth-child(4){ -webkit-animation-delay: 0.4s; } h1 span:nth-child(5){ -webkit-animation-delay: 0.5s; } h1 span:nth-child(6){ -webkit-animation-delay: 0.6s; } h1 span:nth-child(7){ -webkit-animation-delay: 0.7s; } h1 span:nth-child(8){ -webkit-animation-delay: 0.8s; } @keyframes rolltext { 45% { transform: rotate(0deg); opacity: 1; } 60% { transform: rotate(90deg); opacity: 0.5; } 75% { transform: rotate(90deg); opacity: 1; } 90% { transform: rotate(0deg); opacity: 0.5; } 100% { transform: rotate(0deg); opacity: 1; } } @-webkit-keyframes rolltext { 45% { -webkit-transform: rotate(0deg); opacity: 1; } 60% { -webkit-transform: rotate(90deg); opacity: 0.5; } 75% { -webkit-transform: rotate(90deg); opacity: 1; } 90% { -webkit-transform: rotate(0deg); opacity: 0.5; } 100% { -webkit-transform: rotate(0deg); opacity: 1; } } @-moz-keyframes rolltext { 45% { -moz-transform: rotate(0deg); opacity: 1; } 60% { -moz-transform: rotate(90deg); opacity: 0.5; } 75% { -moz-transform: rotate(90deg); opacity: 1; } 90% { -moz-transform: rotate(0deg); opacity: 0.5; } 100% { -moz-transform: rotate(0deg); opacity: 1; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

h1 span{ display: inline-block; -animation: rolltext 3s ease-in-out 0s infinite normal; -webkit-animation: rolltext 3s ease-in-out 0s infinite normal; -moz-animation: rolltext 3s ease-in-out 0s infinite normal; opacity: 1; } h1 span:nth-child(1){ -webkit-animation-delay: 0.1s; } h1 span:nth-child(2){ -webkit-animation-delay: 0.2s; } h1 span:nth-child(3){ -webkit-animation-delay: 0.3s; } h1 span:nth-child(4){ -webkit-animation-delay: 0.4s; } h1 span:nth-child(5){ -webkit-animation-delay: 0.5s; } h1 span:nth-child(6){ -webkit-animation-delay: 0.6s; } h1 span:nth-child(7){ -webkit-animation-delay: 0.7s; } h1 span:nth-child(8){ -webkit-animation-delay: 0.8s; } @keyframes rolltext { 45% { transform: rotate(0deg); opacity: 1; } 60% { transform: rotate(90deg); opacity: 0.5; } 75% { transform: rotate(90deg); opacity: 1; } 90% { transform: rotate(0deg); opacity: 0.5;  } 100% { transform: rotate(0deg); opacity: 1;  } } @-webkit-keyframes rolltext { 45% { -webkit-transform: rotate(0deg); opacity: 1; } 60% { -webkit-transform: rotate(90deg); opacity: 0.5; } 75% { -webkit-transform: rotate(90deg); opacity: 1; } 90% { -webkit-transform: rotate(0deg); opacity: 0.5;  } 100% { -webkit-transform: rotate(0deg); opacity: 1;  } } @-moz-keyframes rolltext { 45% { -moz-transform: rotate(0deg); opacity: 1; } 60% { -moz-transform: rotate(90deg); opacity: 0.5; } 75% { -moz-transform: rotate(90deg); opacity: 1; } 90% { -moz-transform: rotate(0deg); opacity: 0.5;  } 100% { -moz-transform: rotate(0deg); opacity: 1;  } }

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

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

 

WRITER

ninomiya

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

この著者の記事を見る