SAMPLE

サンプルはこちらで見ることができます. 鍵盤をクリックすると凹んで色が変わります.

CODE

まず下記のコードを html 側の style タグの中に

@-webkit-keyframes play {
    0% {
        background-color: #aaa;
    }
    50% {
        -webkit-transform: rotateX(30deg)
    }
    100% {
        background-color: #eee;
    }
}

@-webkit-keyframes play-black {
    0% {
        background-color: #000;
    }
    50% {
        -webkit-transform: rotateX(30deg)
    }
    100% {
        background-color: #aaa;
    }
}

を追加します.なんだか今までの style の指定とちょっと違うので戸惑うかもしれませんが, これでアニメーションの定義ができます.

次に キーボードに先ほど定義したアニメーションを割り当てます.

.white-key-set .keyboard {
    display:-moz-box;
    width:40px;
    height:200px;
    border:solid 1px black;
    background-color: #eee;
    -webkit-animation-name: play;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-play-state: paused;
    -webkit-animation-delay: 0.1s;
}

.black-key-set .keyboard {
    display:-moz-box;
    width:30px;
    height:120px;
    border:solid 1px white;
    margin-right: 10px;
    background-color: #000;
    -webkit-animation-name: play-black;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-play-state: paused;
    -webkit-animation-delay: 0.1s;
}

-webkit というベンダープレフィックスが付いているのが今回追加したプロパティです. やっていることは アニメーション名の指定, 長さの指定, 初期時の状態の指定, 遅延時間の指定です.

これでアニメーションの設定は終わりです. ですがまだこれでは動きません. ちょっと面倒ですが, Script 側で押されたときにのみ, このアニメーションを流すようプログラムします.

play() 関数の最後に, 押されたエレメントのアニメーションの状態を有効にする処理を追加します.

// アニメーション
element.style.webkitAnimationPlayState = "running";

これでもまだ正常に動きません. このままだと１度しかアニメーションしてくれません. そこでちょっとしたテクニック. あまり知られていませんが, アニメーション終了時イベントにアニメーション状態を “paused” にすることで再び再生することができます.

// アニメーション終了時イベントを登録
keyboards[i].addEventListener("webkitAnimationEnd", function(){
    // アニメーションが終了したら ステートを "paused" にする.
    // こうすることで "running" にした際にまた再生できることを発見した.
    this.style.webkitAnimationPlayState = "paused";
}, false);

これで鍵盤を押すたび鍵盤がアニメーションするようになります. アニメーションが標準化されて他のブラウザでも動くようになればなぁ～