javascript - 如何将图片动画化为一张一张灰度

Question

这里我有 3 张图片，我想为它们制作动画，这样它们会在半秒后一张一张地变成灰度

这是 fiddle 链接:

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

Answer 1

如果你想按顺序动画图像，你可以尝试这样的事情:

@-webkit-keyframes toGrayScale {
    to {
        -webkit-filter: grayscale(100%);
    }
}

.box:nth-child(1) img {
    -webkit-animation: toGrayScale 1s 0.5s forwards;
}

.box:nth-child(2) img {
    -webkit-animation: toGrayScale 1s 1s forwards;
}

.box:nth-child(3) img {
    -webkit-animation: toGrayScale 1s 1.5s forwards;
}

Updated fiddle