Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

トップ > HTMLなど > 【CSS】花火のアニメーション その2【多重化】

【CSS】花火のアニメーション その2【多重化】

HTMLなど

　どうも！LSSです！！

　先日の記事、

を「なるべくコードを増やさずに」多重化してみました。

（コレジャナイ感ありありかもｗ）

 

 

花火のアニメーション　その２

.
.
.
.
.

 

 

 

 

 

 

コード

<style><!--
@keyframes hnb{
0%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted darkyellow;top:200px;left:150px;}
50%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted yellow;top:0px;left:150px;}
70%{border-radius: 60px; width: 120px; height: 120px; border: 6px dotted blue;top:-60px;left:90px;}
90%{border-radius: 100px; width: 200px; height: 200px; border: 8px dotted red;top:-100px;left:50px;}
100%{border-radius: 100px; width: 200px; height: 200px; border: 8px dotted #ff000000;top:-80px;left:50px;}
}
.hnbdm{
display:inline-block;
position:absolute;
color:white;
animation:hnb 15s linear infinite normal;
}
--></style>
<div style="position: absolute;">
<div class="hnbdm" style="animation-delay: 0s;">.</div>
<div class="hnbdm" style="animation-delay: 0.5s;">.</div>
<div class="hnbdm" style="animation-delay: 1s;">.</div>
<div class="hnbdm" style="animation-delay: 1.5s;">.</div>
<div class="hnbdm" style="animation-delay: 2s;">.</div>
</div>

  

 

前回からの改変点

animationプロパティは複合プロパティです

.hnbdm{
display:inline-block;
position:absolute;
color:white;
animation:hnb 15s linear infinite normal;
}

 

赤文字にした一行、この部分ですが、前回は、

animation:hnb 15s linear 0s infinite normal;

となっていました。

この 0s だけを削ったんですね。

これはアニメーションの開始を「どれだけ遅らせるか」という指定でした。

 

animationプロパティの値で複数の値を設定していますが、これらは
「個別に指定する事もできるものを一括指定している」
ことになります。

 

もし、
animation:hnb 15s linear 0s infinite normal;
を分割して書くとすると、

 

animation-name: hnb;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;

と、結構面倒くさい書き方になってしまいます^^;

一応、内容を日本語に翻訳すると、

hnbという名前で定義したキーフレームによるアニメーションを、
15秒かけて再生、
再生速度は最後まで変化しないように（linear)、
再生開始まで0秒待つ事。
再生回数は無限（infinite）、
再生方向は先頭から最後まで（normal）。

って感じになります。

 

省略したanimation-delayは別に指定しています

<div style="position: absolute;">
<div class="hnbdm" style="animation-delay: 0s;">.</div>
<div class="hnbdm" style="animation-delay: 0.5s;">.</div>
<div class="hnbdm" style="animation-delay: 1s;">.</div>
<div class="hnbdm" style="animation-delay: 1.5s;">.</div>
<div class="hnbdm" style="animation-delay: 2s;">.</div>
</div>

 

アニメーションに関する、animation-delay以外の項目は、「hnbdm」クラスの中で指定しました。

指定しなかったanimation-delayはここ、
「<div>タグを複数用意して、それぞれちょっとだけ開始タイミングを変更する」
事で、花火の多重化を実現しています。

 

あと、中身のないdivが はてなの機能で消されてしまう事が多発したので、中に「.」を入れ、「hnbdm」クラス内に color:white; を入れて見えないようにしましたｗ

 

 

前回 書かなかった、花火風のドットについて

↑の記事に書いた、border-radiusとborderを利用しています。

 

<div style="border-radius: 50px; border: 10px dotted blue; width: 100px; height: 100px;">テスト</div>

のようにコードを書くと、

テスト

こういう円系のボックスになります^^

border-radius=半径 と考え、width（幅）とheight（高さ）に その倍の値を指定します。

この「半径」と「幅・高さ」の比率を維持しながら、より大きい円を設定し、中心位置がズレないようにtop（縦の表示位置・上からの距離）やleft（横の表示位置・左からの距離）も調整したものを書いたのが、 

@keyframes hnb{
0%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted darkyellow;top:200px;left:150px;}
50%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted yellow;top:0px;left:150px;}
70%{border-radius: 60px; width: 120px; height: 120px; border: 6px dotted blue;top:-60px;left:90px;}
90%{border-radius: 100px; width: 200px; height: 200px; border: 8px dotted red;top:-100px;left:50px;}
100%{border-radius: 100px; width: 200px; height: 200px; border: 8px dotted #ff000000;top:-80px;left:50px;}
}

 の部分になります。

 

例えば、

90%{border-radius: 100px; width: 200px; height: 200px; border: 8px dotted red;top:-100px;left:50px;}

は、「アニメ―ションの経過時間が90%経過した時点」での、それぞれのサイズ・位置・色」を指定しています。

 

キーフレームアニメーションについては、

にも書いていますので、参考にしたい方は見てやってください^^

 

  

おわりに

 

本物の花火ってこうですよね^^

根本的にだいぶ違うような気がしてきましたｗｗｗ

 

 

おまけ

試しにdottedをdashedにしてみました。

.
.
.
.
.

 

 

 

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^