0

在这里,我有 3 张图像,我想要为它们设置动画,这样它们会在半秒后一个一个地变成灰度

这是小提琴链接:

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

1 回答 1

3

如果要按顺序对图像进行动画处理,可以尝试以下操作:

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

更新的小提琴

于 2013-11-10T14:23:11.920 回答