javascript - 写真を 1 つずつグレースケールにアニメーション化する方法

Question

ここに3つの画像があり、それらをアニメーション化して、それぞれ0.5秒後にグレースケールに変わるようにしたい

ここにフィドルリンクがあります：

http://jsfiddle.net/PPDVy/

いくつかのサンプルコード:

  .wrap {
       overflow: hidden;
       background-color: #fff;
       margin: 0 auto;
    }

    .box {
       float: left;
       position: relative;
       width: 14.285714286%;



    }

    .boxInner img {
       width: 100%;
       display: block;

    }

    .boxInner img:hover {
       -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
       -o-filter: grayscale(100%);
    }