HOME

ABOUT

ARCHIVES

CONTACT

css3

CSS3:animationを使って遊んでみるvol.2

さて、animationの使いどころを日々模索しているのですが…なかなか指示になれず前に進みません。
とりあえず色々と作ってみて、使えそうな場所を探すという逆転の発想に至り、色々と試していこうと思います。

今回は’animation-duration’と’animation-delay’の2つを用いてみようと思います。

KEY SENTENCE

[1] はじめに

[2] 実装手順

[1] はじめに

こんなのを作ってみようと思います。

example01.) WAVE

example02.) sound

example03.) bomb

[2] 実装手順

ここではexample01.の実装方法を説明していこうと思います。

HTML
<div class="wave-wrapper">
<div id="waves">
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
<div class="bow"></div>
</div>
CSS

.wave-wrapper {
position:relative;
width:100%;
padding:150px;
background:#455765;"
}
#waves {
height: 100px;
position: absolute;
top:60%;
left:45%;
width: 100px;
}
.bow {
background: #ffc800;
bottom: 0;
height: 5px;
position: absolute;
width: 5px;
-webkit-animation: wave 0ms -800ms linear infinite alternate;
-moz-animation: wave 0ms -800ms linear infinite alternate;
animation: wave 0ms -800ms linear infinite alternate;
-webkit-animation-duration: 370ms;
-moz-animation-duration: 370ms;
animation-duration: 370ms;/*-durationは一回のアニメーションに要する時間*/
}
@-webkit-keyframes wave {
0% { opacity: .35; height: 5px; }
100% { opacity: 1; height: 100px; }
}
@-moz-keyframes wave {
0% { opacity: .35; height: 5px; }
100% { opacity: 1; height: 100px; }
}
@keyframes wave {
0% { opacity: .35; height: 5px; }
100% { opacity: 1; height: 100px; }
}
.bow:nth-child(1) { left: 1px; -webkit-animation-delay: -400ms; -moz-animation-delay: -400ms; -webkit-animation-delay: -400ms; }/*-delayは開始時間の基準値からのズレ*/
.bow:nth-child(2) { left: 7px; -webkit-animation-delay: -360ms; -moz-animation-delay: -360ms; -webkit-animation-delay: -360ms; }
.bow:nth-child(3) { left: 13px; -webkit-animation-delay: -320ms; -moz-animation-delay: -320ms; -webkit-animation-delay: -320ms; }
.bow:nth-child(4) { left: 19px; -webkit-animation-delay: -280ms; -moz-animation-delay: -280ms; -webkit-animation-delay: -280ms; }
.bow:nth-child(5) { left: 25px; -webkit-animation-delay: -240ms; -moz-animation-delay: -240ms; -webkit-animation-delay: -240ms; }
.bow:nth-child(6) { left: 31px; -webkit-animation-delay: -200ms; -moz-animation-delay: -200ms; -webkit-animation-delay: -200ms; }
.bow:nth-child(7) { left: 37px; -webkit-animation-delay: -160ms; -moz-animation-delay: -160ms; -webkit-animation-delay: -160ms; }
.bow:nth-child(8) { left: 43px; -webkit-animation-delay: -120ms; -moz-animation-delay: -120ms; -webkit-animation-delay: -120ms; }
.bow:nth-child(9) { left: 49px; -webkit-animation-delay: -80ms; -moz-animation-delay: -80ms; -webkit-animation-delay: -80ms; }
.bow:nth-child(10) { left: 55px; -webkit-animation-delay: -40ms; -moz-animation-delay: -40ms; -webkit-animation-delay: -40ms; }

これで実装完了です。

example02.は’animation-duration’のズレを利用しており、

example03.は’animation-delay’,’animation-duration’の両方を使ってより複雑さを出しています。

今回作ってみた例だと、ローディング用の素材などに使えそうですね。
まだまだ奥が深いanimationタグ。
徐々にサンプルを増やしていこうと思います。

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)