Как анимировать картинки в оттенках серого по одной

Question

Как анимировать картинки в оттенках серого по одной

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

alonblack 10 нояб. 2013, в 15:06

Источник

Теги:

javascript

jquery

html

css

css3

1 ответ

Ещё вопросы

myajouri · Accepted Answer · 2013-11-10T13-14-00.000Z

Если вы хотите анимировать изображения в последовательности, вы можете попробовать что-то вроде этого:

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

Обновленная скрипка

большое спасибо это действительно чертовски !!