Question

这里我有3张图片，我想让它们动画，这样它们会在半秒钟后逐一变成灰度

这里是小提琴链接：

一些示例代码：

  .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

如何逐个动画图片灰度

1 个答案: