CSS3でドミノ倒しみたいにテキストが倒れていくアニメーション
カタログを読み込むときに使われている、テキストのCSS3のアニメーションが面白かったので、
少しアレンジして作ってみました。
↓コチラが作ってみたもの
方法
今回はCSS3のanimationとtransformのrotateを使っています。
ポイントは、テキストを全体ではなくそれぞれ回転させるため、
テキストの一文字一文字をspanで囲うことです。
さらに、spanはインライン要素のため、そのままではtransformが効かないので、
「display:inline-block」を指定しています。
HTML
|
1 | <h1><span>読</span><span>み</span><span>込</span><span>ん</span><span>で</span><span>い</span><span>ま</span><span>す</span></h1> |
CSS
|
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」を使ってアニメーションを少しずつずらし、
ドミノ倒しみたいな感じを出してみました。
Author Profile
SHARE
