MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し中につぎの記述をします id 属性 div2

Size: px

Start display at page:

Download "MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し中につぎの記述をします id 属性 div2"

さゆりたておか
5 years ago
Views:

1 1343 アニメーションを連続させる複数のアニメーションを連続して適用するためにはつぎの 2 つの方法があります 1. 複数の連続したアニメーション全体を繰り返さずに 1 回だけ動かしたい場合は待ち時間を利用して複数のアニメーションを指定しますアニメーション A 0% 100% アニメーション B( 待ち ) アニメーション C( 待ち ) アニメーションB 0% 100% アニメーションC 0% 100% アニメーション D( 待ち ) アニメーション D 0% 100% 2. 複数の連続したアニメーション全体を繰り返し動かしたい場合はアニメーション全体を 100% として各アニメーションの実行タイミングを区切って指定しますアニメーション A 0% 30% アニメーション A 100% 0% アニメーション B アニメーションB アニメーションB 50% 75% 100% アニメーションC アニメーションC 0% 60% 100% アニメーションD アニメーションD 0% 40% 100% 変形する図形とテキストのアニメーションサンプル CSS1 左上から角丸四角形が徐々に大きくなって現れて Hello!! CSS3 という文字が表示されます角丸四角形から楕円形に変形しさらに円形になります円形は不規則に回転し最後は左回転を続けますこれは上記 1 の方法で複数のアニメーションを連続して 1 回だけ動かしています 1

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.

div 要素を記述し中につぎの記述をします id 属性 div2 の div 要素を記述し中に Hello!

DOCTYPE html> <html> <head> <title>morphandtextanime</title> <meta

2 MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し中につぎの記述をします id 属性 div2 の div 要素を記述し中に Hello!! CSS3 と記述します <!DOCTYPE html> <html> <head> <title>morphandtextanime</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="morphandtextanime.css"> </head> <body> <p> 変形する図形にテキストを表示する </p> <div id="stage"> <div id="div1"> <div id="div2">hello!! CSS3</div> </div> </div> </body> </html> CSS の記述 (MorphAndTextAnime.css) #stage ステージのスタイルを指定します overflow: hidden; を指定します図形に遠近感を持たせるために perspective: 500px; と指定します #stage { width: 600px; height: 400px; background-color: #000000; 2

3 position: relative; overflow: hidden; perspective: 500px; -webkit-perspective: 500px; #div1 要素のスタイルを指定します position は absolute 位置は top: -8px; left: -8px; (#stage ボックスの左上端を起点とした位置 ) で指定します width は 0px height は 0px で指定します背景色は background-color: #CCECF4;( 薄い青色 ) ボーダーは border: solid 1px #7FCFE2;( 水色 ) で指定しますアニメーションを6つ指定します 1. アニメーション名を RoundRectAnime1A 実行時間を 4s イージングを linear 開始待ち時間を 0s 繰り返しを 1 実行方向は normal で指定します 2. アニメーション名を RoundRectAnime1B 実行時間を 4s イージングを linear 開始待ち時間を 4s 繰り返しを 1 実行方向は normal で指定します 3. アニメーション名を RoundRectAnime1C 実行時間を 4s イージングを linear 開始待ち時間を 8s 繰り返しを 1 実行方向は normal で指定します 4. アニメーション名を RoundRectAnime1D 実行時間を 10s イージングを linear 開始待ち時間を 12s 繰り返しを 1 実行方向は normal で指定します 5. アニメーション名を RoundRectAnime1E 実行時間を 10s イージングを linear 開始待ち時間を 22s 繰り返しを infinite 実行方向は normal で指定します 6. アニメーション名を RoundRectAnime1F 実行時間を 12s イージングを linear 開始待ち時間を 0s 繰り返しを 1 実行方向は normal で指定しますアニメーションの結果を次のアニメーションに引き継ぐために animation-fill-mode: forwards; の指定をします #div1 { top: -8px; left: -8px; width: 0px; height: 0px; background-color: #CCECF4; border: solid 1px #7FCFE2; position: absolute; animation: RoundRectAnime1A 4s linear 0s 1 normal, RoundRectAnime1B 4s linear 4s 1 normal, RoundRectAnime1C 4s linear 8s 1 normal, RoundRectAnime1D 10s linear 12s 1 normal, RoundRectAnime1E 10s linear 22s infinite normal, RoundRectAnime1F 12s linear 0s 1 normal; 3

4 -webkit-animation: RoundRectAnime1A 4s linear 0s 1 normal, RoundRectAnime1B 4s linear 4s 1 normal, RoundRectAnime1C 4s linear 8s 1 normal, RoundRectAnime1D 10s linear 12s 1 normal, RoundRectAnime1E 10s linear 22s infinite normal, RoundRectAnime1F 12s linear 0s 1 normal; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; アニメーション名 RoundRectAnime1A に対応するタイムライン (@keyframes) を指定します 0% から 50% の間に top: -8px; left: -8px; から top: 122px; left: 87px; に移動させ width: 0px; height: 0px; から width: 400px; height: 150px; に拡大しボーダーの幅を border: solid 1px #7FCFE2; から border: solid 10px #7FCFE2; に変更し border-radius: 50px; で四隅の角を丸くします 50% から 100% RoundRectAnime1A { 0% { 50% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; 100% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: RoundRectAnime1A { 0% { 50% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; 100% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; アニメーション名 RoundRectAnime1B に対応するタイムライン (@keyframes) を指定します 0% ではアニメーション RoundRectAnime1A の結果の状態にします 0% から 50% の間に border-radius: 50px; から border-radius: 210px / 85px; に変更し楕円形にします 50% から 100% RoundRectAnime1B { 0% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; 50% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 210px / 85px; 100% { top: 122px; left: 87px; width: 400px; height: 150px; 4

5 border: solid 10px #7FCFE2; border-radius: 210px / RoundRectAnime1B { 0% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 50px; 50% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 210px / 85px; 100% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 210px / 85px; アニメーション名 RoundRectAnime1C に対応するタイムライン (@keyframes) を指定します 0% ではアニメーション RoundRectAnime1B の結果の状態にします 0% から 50% の間に border-radius: 210px / 85px; から border-radius: 160px; に変更し円形にします 50% から 100% RoundRectAnime1C { 0% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 210px / 85px; 50% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: RoundRectAnime1C { 0% { top: 122px; left: 87px; width: 400px; height: 150px; border: solid 10px #7FCFE2; border-radius: 210px / 85px; 50% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; アニメーション名 RoundRectAnime1D に対応するタイムライン (@keyframes) を指定します 0% ではアニメーション RoundRectAnime1C の結果の状態にします 0% から 100% の間に transform: rotatez(360deg) rotatey(720deg) rotatex(1080deg); で円形を時計回りに 360 度 Y 軸の正方向から見て時計回りに 720 度 X 軸の正方向から見て時計回りに 1080 RoundRectAnime1D { 0% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; transform: rotatez(360deg) rotatey(720deg) rotatex(1080deg); 5

6 @-webkit-keyframes RoundRectAnime1D { 0% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; -webkit-transform: rotatez(360deg) rotatey(720deg) rotatex(1080deg); アニメーション名 RoundRectAnime1E に対応するタイムライン (@keyframes) を指定します 0% ではアニメーション RoundRectAnime1D の結果の状態 ( 円形が正面を向いている状態 ) にします 0% から 100% の間に transform: rotatey(-360deg); で Y 軸の正方向から見て反時計回りに 360 度回転させますアニメーション RoundRectAnime1E は繰り返しを infinite RoundRectAnime1E { 0% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; transform: RoundRectAnime1E { 0% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; 100% { top: 40px; left: 130px; width: 300px; height: 300px; border: solid 10px #7FCFE2; border-radius: 160px; -webkit-transform: rotatey(-360deg); アニメーション名 RoundRectAnime1F に対応するタイムライン (@keyframes) を指定します図形の背景色とボーダーの色をを変化させます 0% では background-color: #000000;( 黒色 )border: solid 1px #000000;( 黒色 ) に指定します 0% から 25% の間に background-color: #0000FF;( 青色 ) border: solid 10px #00FF99;( 青緑色 ) にします 25% から 50% の間に background-color: #00FFFF;( シアン色 ) border: solid 10px #9900FF;( 紫色 ) にします 50% から 75% の間に background-color: #FFFF00;( 黄色 ) border: solid 10px #0099FF; ( ダークシアン色 ) にします 75% から 100% の間に background-color: #FF0000;( 赤色 ) border: solid 10px #7FCFE2;( 水色 ) にします 6

7 @keyframes RoundRectAnime1F { 0% { background-color: #000000; border: solid 1px #000000; 25% { background-color: #0000FF; border: solid 10px #00FF99; 50% { background-color: #00FFFF; border: solid 10px #9900FF; 75% { background-color: #FFFF00; border: solid 10px #90099FF; 100% { background-color: #FF0000; border: solid 10px RoundRectAnime1F { 0% { background-color: #000000; border: solid 1px #000000; 25% { background-color: #0000FF; border: solid 10px #00FF99; 50% { background-color: #00FFFF; border: solid 10px #9900FF; 75% { background-color: #FFFF00; border: solid 10px #90099FF; 100% { background-color: #FF0000; border: solid 10px #7FCFE2; #div2 要素のスタイルを指定します position は absolute 位置は top: 40px; left: 0px; (#div1 ボックスの左上端を起点とした位置 ) で指定します width は 400px height は 150px で指定しますテキストのスタイルを text-align: center; color: #FF9900;( オレンジ色 ) font: bold 64px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; と指定します opacity: 0.0; で見えないようにしておきますアニメーションを4つ指定します 1. アニメーション名を RoundRectAnime2A 実行時間を 4s イージングを linear 開始待ち時間を 0s 繰り返しを 1 実行方向は normal で指定します 2. アニメーション名を RoundRectAnime2B 実行時間を 4s イージングを linear 開始待ち時間を 4s 繰り返しを 1 実行方向は normal で指定します 3. アニメーション名を RoundRectAnime2C 実行時間を 4s イージングを linear 開始待ち時間を 8s 繰り返しを 1 実行方向は normal で指定します 4. アニメーション名を RoundRectAnime2D 実行時間を 12s イージングを linear 開始待ち時間を 0s 繰り返しを 1 実行方向は normal で指定しますアニメーションの結果を次のアニメーションに引き継ぐために animation-fill-mode: forwards; の指定をします #div2 { top: 40px; left: 0px; width: 400px; height: 150px; text-align: center; color: #FF9900; font: bold 64px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; opacity: 0.0; position: absolute; 7

8 animation: RoundRectAnime2A 4s linear 0s 1 normal, RoundRectAnime2B 4s linear 4s 1 normal, RoundRectAnime2C 4s linear 8s 1 normal, RoundRectAnime2D 12s linear 0s 1 normal; -webkit-animation: RoundRectAnime2A 4s linear 0s 1 normal, RoundRectAnime2B 4s linear 4s 1 normal, RoundRectAnime2C 4s linear 8s 1 normal, RoundRectAnime2D 12s linear 0s 1 normal; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; アニメーション名 RoundRectAnime2A に対応するタイムライン (@keyframes) を指定します 0% から 50% のまでは opacity: 0.0; のままです 50% から 70% の間に opacity: 0.0; opacity: 1.0; に変更しテキストが徐々に見えるようにします 70% から 100% までは opacity: 1.0; RoundRectAnime2A { 0% { opacity: 0.0; 50% { opacity: 0.0; 70% { opacity: 1.0; 100% { opacity: RoundRectAnime2A { 0% { opacity: 0.0; 50% { opacity: 0.0; 70% { opacity: 1.0; 100% { opacity: 1.0; アニメーション名 RoundRectAnime2B に対応するタイムライン (@keyframes) を指定します 0% で opacity: 1.0; に指定します 0% から 100% まで opacity: 1.0; RoundRectAnime2B { 0% { opacity: 1.0; 100% { opacity: RoundRectAnime2B { 0% { opacity: 1.0; 100% { opacity: 1.0; 8

9 アニメーション名 RoundRectAnime2C に対応するタイムラインを指定します 0% から 50% のまでは opacity: 1.0; のままです 0% から 50% の間に opacity: 1.0; のままで top: 40px; left: 0px; から top: 80px; left: 50px; に変更し width: 400px; から width: 200px; に変更しテキストを2 段書きにします 70% から 100% RoundRectAnime2C { 0% { opacity: 1.0; 50% { opacity: 1.0; top: 80px; left: 50px; width: 200px; 100% { opacity: 1.0; top: 80px; left: 50px; width: RoundRectAnime2C { 0% { opacity: 1.0; 50% { opacity: 1.0; top: 80px; left: 50px; width: 200px; 100% { opacity: 1.0; top: 80px; left: 50px; width: 200px; アニメーション名 RoundRectAnime2D に対応するタイムライン (@keyframes) を指定しますテキストの色をを変化させます 0% から 25% のまでは color: #FF9900;( オレンジ色 ) のままです 25% から 50% の間に color: #9900FF;( 紫色 ) に 50% から 75% の間に color: #0099FF; ( ダークシアン色 ) に 75% から 100% の間に color: #00FF99;( 青緑色 ) RoundRectAnime2D { 0% { color: #FF9900; 25% { color: #FF9900; 50% { color: #9900FF; 75% { color: #0099FF; 100% { color: RoundRectAnime2D { 0% { color: #FF9900; 25% { color: #FF9900; 50% { color: #9900FF; 75% { color: #0099FF; 100% { color: #00FF99; 9

10 テキストがバウンドスィング円運動するアニメーションサンプル CSS2 テキスト文字が上下にバウンド左右にバウンドスィング円運動しますこれも上記 1 の方法で待ち時間を利用して複数のアニメーションを連続して 1 回だけ動かします BoundSwingText の説明 HTML の記述 (BoundSwingText.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作りその中にボックスやテキストを記述します id 属性 txt_base1 から id 属性 txt_base4 の div 要素に class 属性 txt_base を付加します id 属性 txt_base1 と id 属性 txt_base3 の div 要素は div 要素の中にテキスト Bound Swing Circle を記述します id 属性 txt_base2 と id 属性 txt_base4 の div 要素は中に span 要素を記述しその span 要素の中にテキストを記述します <!DOCTYPE html> <html> <head> <title>boundswingtext</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="boundswingtext.css"> </head> 10

11 <body> <p> Text をバウンドスィング円運動させる </p> <div id="stage"> <div id="txt_base1" class="txt_base">bound Swing Circle</div> <div id="txt_base2" class="txt_base"><span>bound Swing Circle</span></div> <div id="txt_base3" class="txt_base">bound Swing Circle</div> <div id="txt_base4" class="txt_base"><span>bound Swing Circle</span></div> </div> </body> </html> CSS の記述 (BoundSwingText.css) 先ずアニメーションが動く #stage の記述をしますテキストのスィングや円運動の時にテキストのボックスが #stage からはみ出るので overflow: hidden; を指定しますテキストのスタイルを指定します #stage { width: 500px; height: 300px; border: solid 1px #000000; background-color: #DDDDDD; text-shadow: 1px 1px #999999; font: 16px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: #000000; text-align: center; position: relative; overflow: hidden;.txt_base クラス (#txt_base1 から #txt_base4) の共通スタイルを指定します.txt_base { top: 270px; left: 150px; width: 200px; height: 30px; /* border: 1px solid red; */ position: absolute;.txt_base span(#txt_base2 と #txt_base4 の span 要素 ) の共通スタイルを指定します.txt_base span { top: 0px; left: 0px; width: 200px; height: 30px; /* border: 1px solid blue; */ position: absolute; 11

12 上下にバウンドするアニメーション #txt_base1 ボックスのスタイルを指定します opacity: 1.0; で見えるようにしておきますアニメーション名を up_down_anime 実行時間を 4s イージングを linear 開始待ち時間を 0s 繰り返しを 1 実行方向は normal で指定しますもう1つアニメーション名を opacity0_anime 実行時間を 23s イージングを linear 開始待ち時間を 4s 繰り返しを 1 実行方向は normal で指定しますこれは上下にバウンドするアニメーションが終了したら左右にバウンドするアニメーションスィングするアニメーション円運動するアニメーションが終了するまで (23 秒間 ) #txt_base1 ボックスを見えないようにするためです #txt_base1 { opacity: 1.0; animation: up_down_anime 4s linear 0s 1 normal, opacity0_anime 23s linear 4s 1 normal; -webkit-animation: up_down_anime 4s linear 0s 1 normal, opacity0_anime 23s linear 4s 1 normal; アニメーション名 up_down_anime に対応するタイムライン (@keyframes) を指定します 10% で transform: translatey(-260px); で最高位置へ移動させます 20% で最低位置まで戻し 30% で-160px へ移動というように徐々に高さを低くしていきます 100% では最低位置へ戻します 12

13 @keyframes up_down_anime { 0% { animation-timing-function: ease-out; 10% { transform: translatey(-260px); animation-timing-function: ease-in; 20% { transform: translatey(0px); animation-timing-function: ease-out; 30% { transform: translatey(-160px); animation-timing-function: ease-in; 40% { transform: translatey(0px); animation-timing-function: ease-out; 50% { transform: translatey(-90px); animation-timing-function: ease-in; 60% { transform: translatey(0px); animation-timing-function: ease-out; 70% { transform: translatey(-40px); animation-timing-function: ease-in; 80% { transform: translatey(0px); animation-timing-function: ease-out; 90% { transform: translatey(-10px); animation-timing-function: ease-in; 100% { transform: up_down_anime { 0% { animation-timing-function: ease-out; 10% { -webkit-transform: translatey(-260px); -webkit-animation-timing-function: ease-in; 20% { -webkit-transform: translatey(0px); -webkit-animation-timing-function: ease-out; 30% { -webkit-transform: translatey(-160px); -webkit-animation-timing-function: ease-in; 40% { -webkit-transform: translatey(0px); -webkit-animation-timing-function: ease-out; 50% { -webkit-transform: translatey(-90px); -webkit-animation-timing-function: ease-in; 60% { -webkit-transform: translatey(0px); -webkit-animation-timing-function: ease-out; 70% { -webkit-transform: translatey(-40px); -webkit-animation-timing-function: ease-in; 80% { -webkit-transform: translatey(0px); -webkit-animation-timing-function: ease-out; 90% { -webkit-transform: translatey(-10px); -webkit-animation-timing-function: ease-in; 100% { -webkit-transform: translatey(0px); アニメーション名 opacity0_anime に対応するタイムライン (@keyframes) を指定します 0% で opacity: 0.0; で見えないようにして 100% opacity0_anime { 0% { opacity: 0.0; 100% { opacity: opacity0_anime { 0% { opacity: 0.0; 100% { opacity: 0.0; 13

14 左右にバウンドするアニメーション #txt_base2( 横移動するボックス ) のスタイルを指定します opacity: 0.0; で見えないようにしておきますアニメーション名を bound_anime 実行時間を 4s イージングを linear 開始待ち時間を 4s 繰り返しを 2 実行方向は normal で指定しますもう1つアニメーション名を opacity1_anime 実行時間を 8s イージングを linear 開始待ち時間を 4s 繰り返しを 1 実行方向は normal で指定しますこれは左右にバウンドするアニメーションが動く間だけ #txt_base2 ボックスを見えるようにするためです #txt_base2 { opacity: 0.0; animation: bound_anime 4s linear 4s 2 normal, opacity1_anime 8s linear 4s 1 normal; -webkit-animation: bound_anime 4s linear 4s 2 normal, opacity1_anime 8s linear 4s 1 normal; アニメーション名 bound_anime に対応するタイムライン (@keyframes) を指定します 12.5% で transform: translatex(-80px); で水平に左方向へ 80px まで ease-in で移動させます 25% で transform: translatex(-160px); で水平に左方向へ 160px まで ease-out で移動させます 25% から 50% で元の位置に戻し 50% から 75% で右方向へ移動させ 75% から 100% で元の位置へ戻します 14

15 @keyframes bound_anime { 0% { transform: translatex(0px); animation-timing-function: ease-in; 12.5% { transform: translatex(-80px); animation-timing-function: ease-out; 25% { transform: translatex(-160px); animation-timing-function: ease-in; 37.5% { transform: translatex(-80px); animation-timing-function: ease-out; 50% { transform: translatex(0px); animation-timing-function: ease-in; 62.5% { transform: translatex(80px); animation-timing-function: ease-out; 75% { transform: translatex(160px); animation-timing-function: ease-in; 87.5% { transform: translatex(80px); animation-timing-function: ease-out; 100% { transform: bound_anime { 0% { -webkit-transform: translatex(0px); -webkit-animation-timing-function: ease-in; 12.5% { -webkit-transform: translatex(-80px); -webkit-animation-timing-function: ease-out; 25% { -webkit-transform: translatex(-160px); -webkit-animation-timing-function: ease-in; 37.5% { -webkit-transform: translatex(-80px); -webkit-animation-timing-function: ease-out; 50% { -webkit-transform: translatex(0px); -webkit-animation-timing-function: ease-in; 62.5% { -webkit-transform: translatex(80px); -webkit-animation-timing-function: ease-out; 75% { -webkit-transform: translatex(160px); -webkit-animation-timing-function: ease-in; 87.5% { -webkit-transform: translatex(80px); -webkit-animation-timing-function: ease-out; 100% { -webkit-transform: translatex(0px); #txt_base2 span( 縦移動するボックス ) のスタイルを指定しますアニメーション名を bound_anime_a 実行時間を 4s イージングを linear 開始待ち時間を 4s 繰り返しを 2 実行方向は normal で指定します #txt_base2 span { animation: bound_anime_a 4s linear 4s 2 normal; -webkit-animation: bound_anime_a 4s linear 4s 2 normal; アニメーション名 bound_anime_a に対応するタイムライン (@keyframes) を指定します 12.5% で transform: translatey(-250px); で上方向へ 250px まで ease-out で移動させます 25% で transform: translatey(0px); で元の位置に ease-in で戻します以後 25% ごとに同様の動きをして 100% までの間に4 bound_anime_a { 0% { transform: translatey(0px); animation-timing-function: ease-out; 12.5% { transform: translatey(-250px); animation-timing-function: ease-in; 15

16 25% { transform: translatey(0px); animation-timing-function: ease-out; 37.5% { transform: translatey(-250px); animation-timing-function: ease-in; 50% { transform: translatey(0px); animation-timing-function: ease-out; 62.5% { transform: translatey(-250px); animation-timing-function: ease-in; 75% { transform: translatey(0px); animation-timing-function: ease-out; 87.5% { transform: translatey(-250px); animation-timing-function: ease-in; 100% { transform: bound_anime_a { 0% { -webkit-transform: translatey(0px); -webkit-animation-timing-function: ease-out; 12.5% { -webkit-transform: translatey(-250px); -webkit-animation-timing-function: ease-in; 25% { -webkit-transform: translatey(0px); -webkit-animation-timing-function: ease-out; 37.5% { -webkit-transform: translatey(-250px); -webkit-animation-timing-function: ease-in; 50% { -webkit-transform: translatey(0px); -webkit-animation-timing-function: ease-out; 62.5% { -webkit-transform: translatey(-250px); -webkit-animation-timing-function: ease-in; 75% { -webkit-transform: translatey(0px); -webkit-animation-timing-function: ease-out; 87.5% { -webkit-transform: translatey(-250px); -webkit-animation-timing-function: ease-in; 100% { -webkit-transform: translatey(0px); #txt_base2 ボックスに指定してあったアニメーション名 opacity1_anime に対応するタイムライン (@keyframes) を指定します 0% で opacity: 1.0; で見えるようにして 98% までそのままにします 98% から 100% の間に opacity: 0.0; で元のように見えないようにします 98% から見えないようにするのは次に始まるスィングするアニメーションが始まった時にテキスト文字が一瞬だけ二重に重なって見えるのを防ぐためですこの opacity1_anime は左右にバウンドするアニメーションスィングするアニメーション円運動するアニメーションの共通タイムライン(@keyframes) opacity1_anime { 0% { opacity: 1.0; 98% { opacity: 1.0; 100% { opacity: opacity1_anime { 0% { opacity: 1.0; 98% { opacity: 1.0; 100% { opacity: 0.0; 16

17 スィングするアニメーション #txt_base3( スィングするボックス ) のスタイルを指定します opacity: 0.0; で見えないようにしておきますボックスをスィングさせる ( 円弧を描く ) ために変化の起点 ( 回転の中心 ) を transform-origin: center -250px; で指定しますアニメーション名を swing_anime 実行時間を 2s イージングを linear 開始待ち時間を 12s 繰り返しを 3 実行方向は normal で指定しますもう1つアニメーション名を opacity1_anime 実行時間を 6s イージングを linear 開始待ち時間を 12s 繰り返しを 1 実行方向は normal で指定しますこれはスィングするアニメーションが動く間だけ #txt_base3 ボックスを見えるようにするためです #txt_base3 { opacity: 0.0; transform-origin: center -250px; -webkit-transform-origin: center -250px; animation: swing_anime 2s linear 12s 3 normal, opacity1_anime 6s linear 12s 1 normal; -webkit-animation: swing_anime 2s linear 12s 3 normal, opacity1_anime 6s linear 12s 1 normal; アニメーション名 swing_anime に対応するタイムライン (@keyframes) を指定します 25% で transform: rotatez(45deg); で時計回りに 45 度 ease-out で回転させます 25% から 50% で元の位置に ease-in で戻し 50% から 75% で transform: rotatez(-45deg); で反時計回りに 45 度 ease-out で回転させます 75% から 100% で元の位置に ease-in で戻します 17

18 @keyframes swing_anime { 0% { animation-timing-function: ease-out; 25% { transform: rotatez(45deg); animation-timing-function: ease-in; 50% { transform: rotatez(0deg); animation-timing-function: ease-out; 75% { transform: rotatez(-45deg); animation-timing-function: ease-in; 100% swing_anime { 0% { -webkit-animation-timing-function: ease-out; 25% { -webkit-transform: rotatez(45deg); -webkit-animation-timing-function: ease-in; 50% { -webkit-transform: rotatez(0deg); -webkit-animation-timing-function: ease-out; 75% { -webkit-transform: rotatez(-45deg); -webkit-animation-timing-function: ease-in; 100% { アニメーション名 opacity1_anime に対応するタイムライン (@keyframes) を指定します 0% で opacity: 1.0; で見えるようにして 98% までそのままにします 98% から 100% の間に opacity: 0.0; で元のように見えないようにします 98% から見えないようにするのは次に始まる円運動するアニメーションが始まった時にテキスト文字が一瞬だけ二重に重なって見えるのを防ぐためですこの opacity1_anime は左右にバウンドするアニメーションスィングするアニメーション円運動するアニメーションの共通タイムライン (@keyframes) opacity1_anime { 0% { opacity: 1.0; 98% { opacity: 1.0; 100% { opacity: opacity1_anime { 0% { opacity: 1.0; 98% { opacity: 1.0; 100% { opacity: 0.0; 18

19 円運動するアニメーション #txt_base4 ボックス ( 円運動するボックス ) のスタイルを指定します opacity: 0.0; で見えないようにしておきますボックスを円運動させるために変化の起点 ( 回転の中心 ) を transform-origin: center -110px; で指定しますアニメーション名を circle_anime 実行時間を 9s イージングを ease-out 開始待ち時間を 18s 繰り返しを 1 実行方向は normal で指定しますもう1つアニメーション名を opacity1_anime 実行時間を 9s イージングを linear 開始待ち時間を 18s 繰り返しを 1 実行方向は normal で指定しますこれは円運動するアニメーションが動く間だけ #txt_base4 ボックスを見えるようにするためです #txt_base4 { opacity: 0.0; transform-origin: center -110px; -webkit-transform-origin: center -110px; animation: circle_anime 9s ease-out 18s 1 normal, opacity1_anime 9s linear 18s 1 normal; -webkit-animation: circle_anime 9s ease-out 18s 1 normal, opacity1_anime 9s linear 18s 1 normal; アニメーション名 circle_anime に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatez(1080deg); で時計回りに 1080 度回転 (3 回転 ) させますアニメーション名 circle_anime でイージングを ease-out で指定しているので最後はゆっくりと停止します 19

20 @keyframes circle_anime { 0% { 100% { transform: circle_anime { 0% { 100% { -webkit-transform: rotatez(1080deg); #txt_base4 span( 逆回転するボックス ) のスタイルを指定しますテキスト文字を水平に保つために #txt_base4 ボックスとは逆方向に回転させますアニメーション名を circle_anime_a 実行時間を 9s イージングを ease-out 開始待ち時間を 18s 繰り返しを 1 実行方向は normal で指定します #txt_base4 span { animation: circle_anime_a 9s ease-out 18s 1 normal; -webkit-animation: circle_anime_a 9s ease-out 18s 1 normal; アニメーション名 circle_anime_a に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatez(-1080deg); で反時計回りに 1080 度回転 (3 回転 ) させますアニメーション名 circle_anime_a でイージングを ease-out で指定しているので circle_anime_a { 0% { 100% { transform: circle_anime_a { 0% { 100% { -webkit-transform: rotatez(-1080deg); #txt_base4 ボックスに指定してあったアニメーション名 opacity1_anime に対応するタイムライン (@keyframes) を指定します 0% で opacity: 1.0; で見えるようにして 98% までそのままにします 98% から 100% の間に opacity: 0.0; で元のように見えないようにします 98% から見えないようにするのはアニメーションすべてが終わって上下にバウンドするアニメーションの最初に戻った時にテキスト文字が一瞬だけ二重に重なって見えるのを防ぐためですこの opacity1_anime は左右にバウンドするアニメーションスィングするアニメーション円運動するアニメーションの共通タイムライン (@keyframes) 20

21 opacity1_anime { 0% { opacity: 1.0; 98% { opacity: 1.0; 100% { opacity: opacity1_anime { 0% { opacity: 1.0; 98% { opacity: 1.0; 100% { opacity: 0.0; 21

文字が 1 個ずつが転がりながらやって来るアニメーションサンプル CSS3 左側から文字が 1 個ずつ回転しなら移動してきます文字が全部そろったらしばらくそのまま表示し消えます再度左側から文字が転がってきますこれは上記 2 の方法で複数のアニメーションを連続して繰り返し動かしています RollingCharctersAnime1 の説明 HTML の記述

22 文字が 1 個ずつが転がりながらやって来るアニメーションサンプル CSS3 左側から文字が 1 個ずつ回転しなら移動してきます文字が全部そろったらしばらくそのまま表示し消えます再度左側から文字が転がってきますこれは上記 2 の方法で複数のアニメーションを連続して繰り返し動かしています RollingCharctersAnime1 の説明 HTML の記述 (RollingCharctersAnime1.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 rolling1 から rolling12 の12 個の div 要素を記述しそれぞれの div 要素の中に!? 3 S S C - 5 L M T H の文字を記述します <!DOCTYPE html> <html> <head> <title>rollingcharctersanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="rollingcharctersanime1.css"> </head> <body> <p> アニメーションで文字を回転移動させ文字が揃ったら繰り返す </p> <div id="stage"> <div id="rolling1">!</div> <div id="rolling2">?</div> <div id="rolling3">3</div> <div id="rolling4">s</div> <div id="rolling5">s</div> 22

23 <div id="rolling6">c</div> <div id="rolling7">-</div> <div id="rolling8">5</div> <div id="rolling9">l</div> <div id="rolling10">m</div> <div id="rolling11">t</div> <div id="rolling12">h</div> </div> </body> </html> CSS の記述 (RollingCharctersAnime1.css) #stage ステージのスタイルを指定します背景色を background-color: #000000;( 黒色 ) で指定します文字の開始位置が #stage ボックス左側の外になるので overflow: hidden; を指定します #stage { width: 800px; height: 150px; background-color: #000000; position: relative; overflow: hidden; #stage div 要素のスタイルを指定します文字の共通スタイルになります position は absolute 位置は top: 20px; left: -200px;(#stage ボックスの左上端を起点とした位置 ) で指定します opacity: 0.0; で文字が見えないようにしておきます文字のスタイルを color: #9999FF;( 水色 ) font: bold 96px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で指定します #stage div { top: 20px; left: -200px; opacity: 0.0; position: absolute; color: #9999FF; font: bold 96px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; #rolling1 要素 ( 文字! ) のスタイルを指定しますアニメーション名を rollinganime1 実行時間を 20s イージングを linear 開始待ち時間 23

24 を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字! 回転 *****************************************/ #rolling1 { animation: rollinganime1 20s linear 0s infinite normal; -webkit-animation: rollinganime1 20s linear 0s infinite normal; アニメーション名 rollinganime1 に対応するタイムライン (@keyframes) を指定します 0% から 12% の間に transform: rotatez(2160deg); で時計回りに 2160 度回転させながら left: -200px; から left: 700px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 12% から 100% rollinganime1 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 12% { left: 700px; transform: rotatez(2160deg); opacity: 1.0; 100% { left: 700px; transform: rotatez(2160deg); opacity: rollinganime1 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 12% { left: 700px; -webkit-transform: rotatez(2160deg); opacity: 1.0; 100% { left: 700px; -webkit-transform: rotatez(2160deg); opacity: 1.0; #rolling2 要素 ( 文字? ) のスタイルを指定しますアニメーション名を rollinganime2 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字? 回転 *****************************************/ #rolling2 { animation: rollinganime2 20s linear 0s infinite normal; -webkit-animation: rollinganime2 20s linear 0s infinite normal; アニメーション名 rollinganime2 に対応するタイムライン (@keyframes) を指定します 0% から 13% までは初期状態 ( 移動回転せず見えません ) のままです 13% から 24% の間に transform: rotatez(2160deg); で時計回りに 2160 度回転させながら left: -200px; から left: 650px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 24% から 100% まではそのままにします 24

25 @keyframes rollinganime2 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 13% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 24% { left: 650px; transform: rotatez(2160deg); opacity: 1.0; 100% { left: 650px; transform: rotatez(2160deg); opacity: rollinganime2 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 13% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 24% { left: 650px; -webkit-transform: rotatez(2160deg); opacity: 1.0; 100% { left: 650px; -webkit-transform: rotatez(2160deg); opacity: 1.0; #rolling3 要素 ( 文字 3 ) のスタイルを指定しますアニメーション名を rollinganime3 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 3 回転 *****************************************/ #rolling3 { animation: rollinganime3 20s linear 0s infinite normal; -webkit-animation: rollinganime3 20s linear 0s infinite normal; アニメーション名 rollinganime3 に対応するタイムライン (@keyframes) を指定します 0% から 25% までは初期状態 ( 移動回転せず見えません ) のままです 25% から 34% の間に transform: rotatez(1800deg); で時計回りに 1800 度回転させながら left: -200px; から left: 600px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 34% から 100% rollinganime3 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 25% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 34% { left: 600px; transform: rotatez(1800deg); opacity: 1.0; 100% { left: 600px; transform: rotatez(1800deg); opacity: rollinganime3 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 25% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 34% { left: 600px; -webkit-transform: rotatez(1800deg); opacity: 1.0; 100% { left: 600px; -webkit-transform: rotatez(1800deg); opacity: 1.0; 25

26 #rolling4 要素 ( 文字 S ) のスタイルを指定しますアニメーション名を rollinganime4 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 S 回転 *****************************************/ #rolling4 { animation: rollinganime4 20s linear 0s infinite normal; -webkit-animation: rollinganime4 20s linear 0s infinite normal; アニメーション名 rollinganime4 に対応するタイムライン (@keyframes) を指定します 0% から 35% までは初期状態 ( 移動回転せず見えません ) のままです 35% から 44% の間に transform: rotatez(1800deg); で時計回りに 1800 度回転させながら left: -200px; から left: 540px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 44% から 100% rollinganime4 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 35% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 44% { left: 540px; transform: rotatez(1800deg); opacity: 1.0; 100% { left: 540px; transform: rotatez(1800deg); opacity: rollinganime4 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 35% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 44% { left: 540px; -webkit-transform: rotatez(1800deg); opacity: 1.0; 100% { left: 540px; -webkit-transform: rotatez(1800deg); opacity: 1.0; #rolling5 要素 ( 文字 S ) のスタイルを指定しますアニメーション名を rollinganime5 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 S 回転 *****************************************/ #rolling5 { animation: rollinganime5 20s linear 0s infinite normal; -webkit-animation: rollinganime5 20s linear 0s infinite normal; アニメーション名 rollinganime5 に対応するタイムライン (@keyframes) を指定します 0% から 45% までは初期状態 ( 移動回転せず見えません ) のままです 45% から 52% の間に transform: rotatez(1440deg); で時計回りに 1440 度回転させながら left: -200px; から 26

27 left: 480px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 52% から 100% rollinganime5 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 45% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 52% { left: 480px; transform: rotatez(1440deg); opacity: 1.0; 100% { left: 480px; transform: rotatez(1440deg); opacity: rollinganime5 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 45% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 52% { left: 480px; -webkit-transform: rotatez(1440deg); opacity: 1.0; 100% { left: 480px; -webkit-transform: rotatez(1440deg); opacity: 1.0; #rolling6 要素 ( 文字 C ) のスタイルを指定しますアニメーション名を rollinganime6 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 C 回転 *****************************************/ #rolling6 { animation: rollinganime6 20s linear 0s infinite normal; -webkit-animation: rollinganime6 20s linear 0s infinite normal; アニメーション名 rollinganime6 に対応するタイムライン (@keyframes) を指定します 0% から 53% までは初期状態 ( 移動回転せず見えません ) のままです 53% から 60% の間に transform: rotatez(1440deg); で時計回りに 1440 度回転させながら left: -200px; から left: 410px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 60% から 100% rollinganime6 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 53% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 60% { left: 410px; transform: rotatez(1440deg); opacity: 1.0; 100% { left: 410px; transform: rotatez(1440deg); opacity: rollinganime6 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 53% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 60% { left: 410px; -webkit-transform: rotatez(1440deg); opacity: 1.0; 100% { left: 410px; -webkit-transform: rotatez(1440deg); opacity: 1.0; 27

28 #rolling7 要素 ( 文字 - ) のスタイルを指定しますアニメーション名を rollinganime7 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 - 回転 *****************************************/ #rolling7 { animation: rollinganime7 20s linear 0s infinite normal; -webkit-animation: rollinganime7 20s linear 0s infinite normal; アニメーション名 rollinganime7 に対応するタイムライン (@keyframes) を指定します 0% から 61% までは初期状態 ( 移動回転せず見えません ) のままです 61% から 67% の間に transform: rotatez(1080deg); で時計回りに 1080 度回転させながら left: -200px; から left: 360px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 67% から 100% rollinganime7 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 61% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 67% { left: 360px; transform: rotatez(1080deg); opacity: 1.0; 100% { left: 360px; transform: rotatez(1080deg); opacity: rollinganime7 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 61% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 67% { left: 360px; -webkit-transform: rotatez(1080deg); opacity: 1.0; 100% { left: 360px; -webkit-transform: rotatez(1080deg); opacity: 1.0; #rolling8 要素 ( 文字 5 ) のスタイルを指定しますアニメーション名を rollinganime8 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 5 回転 *****************************************/ #rolling8 { animation: rollinganime8 20s linear 0s infinite normal; -webkit-animation: rollinganime8 20s linear 0s infinite normal; アニメーション名 rollinganime8 に対応するタイムライン (@keyframes) を指定します 0% から 68% までは初期状態 ( 移動回転せず見えません ) のままです 68% から 74% の間 28

29 に transform: rotatez(1080deg); で時計回りに 1080 度回転させながら left: -200px; から left: 310px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 74% から 100% rollinganime8 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 68% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 74% { left: 310px; transform: rotatez(1080deg); opacity: 1.0; 100% { left: 310px; transform: rotatez(1080deg); opacity: rollinganime8 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 68% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 74% { left: 310px; -webkit-transform: rotatez(1080deg); opacity: 1.0; 100% { left: 310px; -webkit-transform: rotatez(1080deg); opacity: 1.0; #rolling9 要素 ( 文字 L ) のスタイルを指定しますアニメーション名を rollinganime9 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 L 回転 *****************************************/ #rolling9 { animation: rollinganime9 20s linear 0s infinite normal; -webkit-animation: rollinganime9 20s linear 0s infinite normal; アニメーション名 rollinganime9 に対応するタイムライン (@keyframes) を指定します 0% から 75% までは初期状態 ( 移動回転せず見えません ) のままです 75% から 80% の間に transform: rotatez(1080deg); で時計回りに 1080 度回転させながら left: -200px; から left: 250px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 80% から 100% rollinganime9 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 75% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 80% { left: 250px; transform: rotatez(1080deg); opacity: 1.0; 100% { left: 250px; transform: rotatez(1080deg); opacity: rollinganime9 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 75% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 80% { left: 250px; -webkit-transform: rotatez(1080deg); opacity: 1.0; 100% { left: 250px; -webkit-transform: rotatez(1080deg); opacity: 1.0; 29

30 #rolling10 要素 ( 文字 M ) のスタイルを指定しますアニメーション名を rollinganime10 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 M 回転 *****************************************/ #rolling10 { animation: rollinganime10 20s linear 0s infinite normal; -webkit-animation: rollinganime10 20s linear 0s infinite normal; アニメーション名 rollinganime10 に対応するタイムライン (@keyframes) を指定します 0% から 81% までは初期状態 ( 移動回転せず見えません ) のままです 81% から 86% の間に transform: rotatez(720deg); で時計回りに 720 度回転させながら left: -200px; から left: 180px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 86% から 100% rollinganime10 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 81% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 86% { left: 180px; transform: rotatez(720deg); opacity: 1.0; 100% { left: 180px; transform: rotatez(720deg); opacity: rollinganime10 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 81% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 86% { left: 180px; -webkit-transform: rotatez(720deg); opacity: 1.0; 100% { left: 180px; -webkit-transform: rotatez(720deg); opacity: 1.0; #rolling11 要素 ( 文字 T ) のスタイルを指定しますアニメーション名を rollinganime11 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 T 回転 *****************************************/ #rolling11 { animation: rollinganime11 20s linear 0s infinite normal; -webkit-animation: rollinganime11 20s linear 0s infinite normal; アニメーション名 rollinganime11 に対応するタイムライン (@keyframes) を指定します 0% から 87% までは初期状態 ( 移動回転せず見えません ) のままです 87% から 91% の間 30

31 に transform: rotatez(720deg); で時計回りに 720 度回転させながら left: -200px; から left: 120px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 91% から 100% rollinganime11 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 87% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 91% { left: 120px; transform: rotatez(720deg); opacity: 1.0; 100% { left: 120px; transform: rotatez(720deg); opacity: rollinganime11 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 87% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 91% { left: 120px; -webkit-transform: rotatez(720deg); opacity: 1.0; 100% { left: 120px; -webkit-transform: rotatez(720deg); opacity: 1.0; #rolling12 要素 ( 文字 H ) のスタイルを指定しますアニメーション名を rollinganime12 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 H 回転 *****************************************/ #rolling12 { animation: rollinganime12 20s linear 0s infinite normal; -webkit-animation: rollinganime12 20s linear 0s infinite normal; アニメーション名 rollinganime12 に対応するタイムライン (@keyframes) を指定します 0% から 92% までは初期状態 ( 移動回転せず見えません ) のままです 92% から 96% の間に transform: rotatez(720deg); で時計回りに 720 度回転させながら left: -200px; から left: 50px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 96% から 100% rollinganime12 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 92% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 96% { left: 50px; transform: rotatez(720deg); opacity: 1.0; 100% { left: 50px; transform: rotatez(720deg); opacity: rollinganime12 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 92% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 96% { left: 50px; -webkit-transform: rotatez(720deg); opacity: 1.0; 100% { left: 50px; -webkit-transform: rotatez(720deg); opacity: 1.0; 31

32 ( 注 : 上記のタイムラインの図を RollingCharacters タイムライン.pdf の RollingCharctersAnime1 タイムラインテーブルで参照できます各アニメーションの実行タイミングが分かります ) 32

33 文字が次々と転がりながらやって来るアニメーションサンプル CSS4 左側から文字が次々と回転しなら移動してきます文字が全部そろったらしばらくそのまま表示し消えます再度左側から文字が転がってきますこれは上記 2 の方法で複数のアニメーションを連続して繰り返し動かしています RollingCharctersAnime2 の説明 HTML の記述 (RollingCharctersAnime2.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 rolling1 から rolling12 の12 個の div 要素を記述しそれぞれの div 要素の中に!? 3 S S C - 5 L M T H の文字を記述します <!DOCTYPE html> <html> <head> <title>rollingcharctersanime2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="rollingcharctersanime2.css"> </head> <body> <p> アニメーションで文字を回転移動 ( 重ねて移動 ) させ文字が揃ったら繰り返す </p> <div id="stage"> <div id="rolling1">!</div> <div id="rolling2">?</div> <div id="rolling3">3</div> <div id="rolling4">s</div> <div id="rolling5">s</div> 33

34 <div id="rolling6">c</div> <div id="rolling7">-</div> <div id="rolling8">5</div> <div id="rolling9">l</div> <div id="rolling10">m</div> <div id="rolling11">t</div> <div id="rolling12">h</div> </div> </body> </html> CSS の記述 (RollingCharctersAnime2.css) #stage ステージのスタイルを指定します背景色を background-color: #000000;( 黒色 ) で指定します文字の開始位置が #stage ボックス左側の外になるので overflow: hidden; を指定します #stage { width: 800px; height: 150px; background-color: #000000; position: relative; overflow: hidden; #stage div 要素のスタイルを指定します文字の共通スタイルになります position は absolute 位置は top: 20px; left: -200px;(#stage ボックスの左上端を起点とした位置 ) で指定します opacity: 0.0; で文字が見えないようにしておきます文字のスタイルを color: #9999FF;( 水色 ) font: bold 96px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で指定します #stage div { top: 20px; left: -200px; opacity: 0.0; position: absolute; color: #9999FF; font: bold 96px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; #rolling1 要素 ( 文字! ) のスタイルを指定しますアニメーション名を rollinganime1 実行時間を 10s イージングを linear 開始待ち時間 34

35 を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字! 回転 *****************************************/ #rolling1 { animation: rollinganime1 10s linear 0s infinite normal; -webkit-animation: rollinganime1 10s linear 0s infinite normal; アニメーション名 rollinganime1 に対応するタイムライン (@keyframes) を指定します 0% から 33% の間に transform: rotatez(2160deg); で時計回りに 2160 度回転させながら left: -200px; から left: 700px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 33% から 100% rollinganime1 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 33% { left: 700px; transform: rotatez(2160deg); opacity: 1.0; 100% { left: 700px; transform: rotatez(2160deg); opacity: rollinganime1 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 33% { left: 700px; -webkit-transform: rotatez(2160deg); opacity: 1.0; 100% { left: 700px; -webkit-transform: rotatez(2160deg); opacity: 1.0; #rolling2 要素 ( 文字? ) のスタイルを指定しますアニメーション名を rollinganime2 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字? 回転 *****************************************/ #rolling2 { animation: rollinganime2 10s linear 0s infinite normal; -webkit-animation: rollinganime2 10s linear 0s infinite normal; アニメーション名 rollinganime2 に対応するタイムライン (@keyframes) を指定します 0% から 13% までは初期状態 ( 移動回転せず見えません ) のままです 13% から 42% の間に transform: rotatez(2160deg); で時計回りに 2160 度回転させながら left: -200px; から left: 650px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 42% から 100% まではそのままにします 35

36 @keyframes rollinganime2 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 13% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 42% { left: 650px; transform: rotatez(2160deg); opacity: 1.0; 100% { left: 650px; transform: rotatez(2160deg); opacity: rollinganime2 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 13% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 42% { left: 650px; -webkit-transform: rotatez(2160deg); opacity: 1.0; 100% { left: 650px; -webkit-transform: rotatez(2160deg); opacity: 1.0; #rolling3 要素 ( 文字 3 ) のスタイルを指定しますアニメーション名を rollinganime3 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 3 回転 *****************************************/ #rolling3 { animation: rollinganime3 10s linear 0s infinite normal; -webkit-animation: rollinganime3 10s linear 0s infinite normal; アニメーション名 rollinganime3 に対応するタイムライン (@keyframes) を指定します 0% から 24% までは初期状態 ( 移動回転せず見えません ) のままです 24% から 49% の間に transform: rotatez(1800deg); で時計回りに 1800 度回転させながら left: -200px; から left: 600px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 49% から 100% rollinganime3 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 24% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 49% { left: 600px; transform: rotatez(1800deg); opacity: 1.0; 100% { left: 600px; transform: rotatez(1800deg); opacity: rollinganime3 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 24% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 49% { left: 600px; -webkit-transform: rotatez(1800deg); opacity: 1.0; 100% { left: 600px; -webkit-transform: rotatez(1800deg); opacity: 1.0; 36

37 #rolling4 要素 ( 文字 S ) のスタイルを指定しますアニメーション名を rollinganime4 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 S 回転 *****************************************/ #rolling4 { animation: rollinganime4 10s linear 0s infinite normal; -webkit-animation: rollinganime4 10s linear 0s infinite normal; アニメーション名 rollinganime4 に対応するタイムライン (@keyframes) を指定します 0% から 32% までは初期状態 ( 移動回転せず見えません ) のままです 32% から 56% の間に transform: rotatez(1800deg); で時計回りに 1800 度回転させながら left: -200px; から left: 540px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 56% から 100% rollinganime4 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 32% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 56% { left: 540px; transform: rotatez(1800deg); opacity: 1.0; 100% { left: 540px; transform: rotatez(1800deg); opacity: rollinganime4 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 32% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 56% { left: 540px; -webkit-transform: rotatez(1800deg); opacity: 1.0; 100% { left: 540px; -webkit-transform: rotatez(1800deg); opacity: 1.0; #rolling5 要素 ( 文字 S ) のスタイルを指定しますアニメーション名を rollinganime5 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 S 回転 *****************************************/ #rolling5 { animation: rollinganime5 10s linear 0s infinite normal; -webkit-animation: rollinganime5 10s linear 0s infinite normal; アニメーション名 rollinganime5 に対応するタイムライン (@keyframes) を指定します 0% から 41% までは初期状態 ( 移動回転せず見えません ) のままです 41% から 62% の間に transform: rotatez(1440deg); で時計回りに 1440 度回転させながら left: -200px; から 37

38 left: 480px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 62% から 100% rollinganime5 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 41% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 62% { left: 480px; transform: rotatez(1440deg); opacity: 1.0; 100% { left: 480px; transform: rotatez(1440deg); opacity: rollinganime5 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 41% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 62% { left: 480px; -webkit-transform: rotatez(1440deg); opacity: 1.0; 100% { left: 480px; -webkit-transform: rotatez(1440deg); opacity: 1.0; #rolling6 要素 ( 文字 C ) のスタイルを指定しますアニメーション名を rollinganime6 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 C 回転 *****************************************/ #rolling6 { animation: rollinganime6 10s linear 0s infinite normal; -webkit-animation: rollinganime6 10s linear 0s infinite normal; アニメーション名 rollinganime6 に対応するタイムライン (@keyframes) を指定します 0% から 48% までは初期状態 ( 移動回転せず見えません ) のままです 48% から 68% の間に transform: rotatez(1440deg); で時計回りに 1440 度回転させながら left: -200px; から left: 410px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 68% から 100% rollinganime6 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 48% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 68% { left: 410px; transform: rotatez(1440deg); opacity: 1.0; 100% { left: 410px; transform: rotatez(1440deg); opacity: rollinganime6 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 48% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 68% { left: 410px; -webkit-transform: rotatez(1440deg); opacity: 1.0; 100% { left: 410px; -webkit-transform: rotatez(1440deg); opacity: 1.0; 38

39 #rolling7 要素 ( 文字 - ) のスタイルを指定しますアニメーション名を rollinganime7 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 - 回転 *****************************************/ #rolling7 { animation: rollinganime7 10s linear 0s infinite normal; -webkit-animation: rollinganime7 10s linear 0s infinite normal; アニメーション名 rollinganime7 に対応するタイムライン (@keyframes) を指定します 0% から 56% までは初期状態 ( 移動回転せず見えません ) のままです 56% から 73% の間に transform: rotatez(1080deg); で時計回りに 1080 度回転させながら left: -200px; から left: 360px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 73% から 100% rollinganime7 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 56% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 73% { left: 360px; transform: rotatez(1080deg); opacity: 1.0; 100% { left: 360px; transform: rotatez(1080deg); opacity: rollinganime7 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 56% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 73% { left: 360px; -webkit-transform: rotatez(1080deg); opacity: 1.0; 100% { left: 360px; -webkit-transform: rotatez(1080deg); opacity: 1.0; #rolling8 要素 ( 文字 5 ) のスタイルを指定しますアニメーション名を rollinganime8 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 5 回転 *****************************************/ #rolling8 { animation: rollinganime8 10s linear 0s infinite normal; -webkit-animation: rollinganime8 10s linear 0s infinite normal; アニメーション名 rollinganime8 に対応するタイムライン (@keyframes) を指定します 0% から 62% までは初期状態 ( 移動回転せず見えません ) のままです 62% から 78% の間 39

40 に transform: rotatez(1080deg); で時計回りに 1080 度回転させながら left: -200px; から left: 310px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 78% から 100% rollinganime8 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 62% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 78% { left: 310px; transform: rotatez(1080deg); opacity: 1.0; 100% { left: 310px; transform: rotatez(1080deg); opacity: rollinganime8 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 62% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 78% { left: 310px; -webkit-transform: rotatez(1080deg); opacity: 1.0; 100% { left: 310px; -webkit-transform: rotatez(1080deg); opacity: 1.0; #rolling9 要素 ( 文字 L ) のスタイルを指定しますアニメーション名を rollinganime9 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 L 回転 *****************************************/ #rolling9 { animation: rollinganime9 10s linear 0s infinite normal; -webkit-animation: rollinganime9 10s linear 0s infinite normal; アニメーション名 rollinganime9 に対応するタイムライン (@keyframes) を指定します 0% から 70% までは初期状態 ( 移動回転せず見えません ) のままです 70% から 81% の間に transform: rotatez(1080deg); で時計回りに 1080 度回転させながら left: -200px; から left: 250px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 81% から 100% rollinganime9 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 70% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 81% { left: 250px; transform: rotatez(720deg); opacity: 1.0; 100% { left: 250px; transform: rotatez(720deg); opacity: rollinganime9 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 70% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 81% { left: 250px; -webkit-transform: rotatez(720deg); opacity: 1.0; 100% { left: 250px; -webkit-transform: rotatez(720deg); opacity: 1.0; 40

41 #rolling10 要素 ( 文字 M ) のスタイルを指定しますアニメーション名を rollinganime10 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 M 回転 *****************************************/ #rolling10 { animation: rollinganime10 10s linear 0s infinite normal; -webkit-animation: rollinganime10 10s linear 0s infinite normal; アニメーション名 rollinganime10 に対応するタイムライン (@keyframes) を指定します 0% から 76% までは初期状態 ( 移動回転せず見えません ) のままです 76% から 86% の間に transform: rotatez(720deg); で時計回りに 720 度回転させながら left: -200px; から left: 180px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 86% から 100% rollinganime10 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 76% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 86% { left: 180px; transform: rotatez(720deg); opacity: 1.0; 100% { left: 180px; transform: rotatez(720deg); opacity: rollinganime10 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 76% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 86% { left: 180px; -webkit-transform: rotatez(720deg); opacity: 1.0; 100% { left: 180px; -webkit-transform: rotatez(720deg); opacity: 1.0; #rolling11 要素 ( 文字 T ) のスタイルを指定しますアニメーション名を rollinganime11 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 T 回転 *****************************************/ #rolling11 { animation: rollinganime11 10s linear 0s infinite normal; -webkit-animation: rollinganime11 10s linear 0s infinite normal; アニメーション名 rollinganime11 に対応するタイムライン (@keyframes) を指定します 0% から 82% までは初期状態 ( 移動回転せず見えません ) のままです 82% から 89% の間 41

42 に transform: rotatez(720deg); で時計回りに 720 度回転させながら left: -200px; から left: 120px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 89% から 100% rollinganime11 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 82% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 89% { left: 120px; transform: rotatez(720deg); opacity: 1.0; 100% { left: 120px; transform: rotatez(720deg); opacity: rollinganime11 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 82% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 89% { left: 120px; -webkit-transform: rotatez(720deg); opacity: 1.0; 100% { left: 120px; -webkit-transform: rotatez(720deg); opacity: 1.0; #rolling12 要素 ( 文字 H ) のスタイルを指定しますアニメーション名を rollinganime12 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 文字 H 回転 *****************************************/ #rolling12 { animation: rollinganime12 10s linear 0s infinite normal; -webkit-animation: rollinganime12 10s linear 0s infinite normal; アニメーション名 rollinganime12 に対応するタイムライン (@keyframes) を指定します 0% から 86% までは初期状態 ( 移動回転せず見えません ) のままです 86% から 92% の間に transform: rotatez(720deg); で時計回りに 720 度回転させながら left: -200px; から left: 50px; に移動させ opacity: 0.0; から opacity: 1.0; に変更して徐々に見えるようにします 92% から 100% rollinganime12 { 0% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 86% { left: -200px; transform: rotatez(0deg); opacity: 0.0; 92% { left: 50px; transform: rotatez(720deg); opacity: 1.0; 100% { left: 50px; transform: rotatez(720deg); opacity: rollinganime12 { 0% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 86% { left: -200px; -webkit-transform: rotatez(0deg); opacity: 0.0; 92% { left: 50px; -webkit-transform: rotatez(720deg); opacity: 1.0; 100% { left: 50px; -webkit-transform: rotatez(720deg); opacity: 1.0; 42

43 ( 注 : 上記のタイムラインの図を RollingCharacters タイムライン.pdf の RollingCharctersAnime2 タイムラインテーブルで参照できます各アニメーションの実行タイミングが分かります ) RollingCharctersAnime2 のように次々と文字が転がって来て全文字が揃ったら消えずに表示したままにするアニメーションは RollingCharctersAnime3.html と RollingCharctersAnime3.css を参照してください RollingCharctersAnime2.css と違う点は各文字のアニメーションの実行回数を infinite ではなく 1 にしています 43

角丸四角形を連続して変形させるアニメーションサンプル CSS5 角丸四角形が楕円形円形角丸長方形ひし形と変形し続けますこれは上記 2 の方法で複数のアニメーションを連続して繰り返し動かしています RoundRectMorphAnime の説明 HTML の記述

DOCTYPE html> <html> <head> <title>roundrectmorphanime</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"

44 角丸四角形を連続して変形させるアニメーションサンプル CSS5 角丸四角形が楕円形円形角丸長方形ひし形と変形し続けますこれは上記 2 の方法で複数のアニメーションを連続して繰り返し動かしています RoundRectMorphAnime の説明 HTML の記述 (RoundRectMorphAnime.html) id 属性 stage の div 要素を作りその中に id 属性 morph の div 要素を記述します <!DOCTYPE html> <html> <head> <title>roundrectmorphanime</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="roundrectmorphanime.css"> </head> <body> <p> アニメーションで連続して変形させる </p> <div id="stage"> <div id="morph"></div> </div> </body> </html> CSS の記述 (RoundRectMorphAnime.css) #stage ステージのスタイルを指定します背景色を background-color: #000000;( 黒色 ) 44

すべて見る

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し中につぎの記述をします id 属性 div2