« 我が家のキャンピングカー Family Wagon SS その2 | Main | My収集モノ »

2017.09.17

CSSアニメーション事始め その2・花火

CSSアニメーションの第2弾は、季節はずれですが花火です。

昔、サントリー・オールドのCMに「恋は遠い日の花火じゃない」てのがありましたね。お弁当屋の田中裕子さん。なんかツンとするものがありました。
サントリー・オールドのCMは昔からいいのがありました。男がいる、女がいる。ダンダンダ~ダン.......。
ワタシが好きだったのは大原麗子さんの「長~く愛して」のやつ。待てども待てども帰らぬダンナにプンプン怒る大原さんが可愛かったですね。
ワタシの母親は大原麗子さんが嫌いだそうで。で理由は、「森進一と別れたから!」。ウ~ン訳のわかんない理由です。

おっと、話題がそれました花火アニメーションの話でした。今回のCSSアニメは火薬弾がヒョロヒョロと打ち上がり、内側から徐々に花火が開く様子を表現しました。どうですかね?
(花火のデザインについてはこちらを参考にさせて頂きました)
なお下のアニメーションは記事にアップするためGIFアニメに変換してます。そのためアニメーションの長さなどがオリジナルと異なります。

Gif__short0

前回のアニメーションでは波が左右、サメが右から左に移動する横のアニメーションでした。今回は上への移動を行っていますが、上下左右の移動は、
  transform : translate( Xpx,Ypx)
で表現します。
この命令で現在位置から横にXの値のピクセル分だけ、縦にはYの値のピクセル分だけ移動します。通常画面の左上が基準になるので、値がプラスの場合は右か下に、値がマイナスの場合は左か上に移動します。

今回は移動だけでなく、花火が内側から徐々に表れるようにイラストの出現をコントロールしています。イラストは内側のオレンジの花火、真ん中の黄色の花火、外側の青とピンクの花火の3枚あって、画面に読込むだけでは画面が開いたと同時に3枚とも表示されます。
そこで@keyframes命令を使ってそれぞれの花火の出現タイミングと見え方を制御してます。下のコードは内側のオレンジの花火を定義している部分です。
オレンジの花火は読込みから8秒間見えるようにしてあります。ただそれでは火薬玉が上がっている最中に花火が見えてしまいます。火薬玉が上がりきって消えてから花火が出てくるように@keyfarmes句で、
0%(読込まれた瞬間)から100%(8秒経過)までに花火がどう見えるかをopacityコマンドで指定しています。つまり、

0%から38%(8秒の38%つまり3秒)まではopacity:0で見えない状態。
3秒から50%つまり4秒までopacity:0.5で半分透けて見える状態に。
4秒から88%つまり7秒までにopcity:1で徐々に完全に見える状態に。
そこから最後の100%つまり8秒まで徐々に消えていく。

と定義してます。他の2つの花火も同じように%を変えて定義してあります。

@keyframes orange{
  0%{opacity: 0;}
  25%{opacity: 0;}
  38%{opacity: 0;}
  50%{opacity: 0.3;}
  63%{opacity: 0.5;}
  75%{opacity: 0.75;}
  88%{opacity: 1;}
  100%{opacity: 0;}
}
.hanabi1{
  animation:orange 8s linear infinite;
  position:absolute; top: 185px; left: 515px;
}
  

|

« 我が家のキャンピングカー Family Wagon SS その2 | Main | My収集モノ »

Comments

Post a comment



(Not displayed with comment.)




TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/62766/65737730

Listed below are links to weblogs that reference CSSアニメーション事始め その2・花火:

« 我が家のキャンピングカー Family Wagon SS その2 | Main | My収集モノ »