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

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

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

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; }