Задержка перехода CSS3

Question

У меня есть слайдер с изображениями.

Если я надену мышь на какой-нибудь слайд, он просто покажет изображение, и изображение должно быть без оттенков серого. Но я хочу иметь задержку перехода для изменения этого эффекта.

Как я могу указать, что при наведении курсора мыши на литиево элемента, в котором это изображение будет изменять изображение внутри с помощью задержки перехода:

.grayscale 
{ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ 
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */ 
} 


.grayscale:hover 
{ 
    filter: none; 
    -webkit-filter: grayscale(0%); 
} 



<li class="kwick grayscale"><!-- using it here will slow down slide effect --> 
<a href="' . $article['url'] . '"> 
    <div class="kw_shadow"></div> 
    <div class="kw_title">' . $article['title'] . '</div> 
    <div class="kw_img"> 
    <img src="' . $article['imageSrc'] . '" alt="' . $article['title'] . '" style="width: 960px; height: 400px;" class="grayscale" /><!-- using it here will apply grayscale if I'm with my mouse fxp on the bottom on right side --> 
    </div> 
</a> 
</li> 

Здесь живут: http://www.sczdavos.eu/

Спасибо за идеи.

Answer 1

Убедитесь поставить -webkit-transition-delay в конце. В противном случае это не сработает.

Это работает

.kwick a:hover img.grayscale{ 
    -webkit-filter: grayscale(0%); 
    -webkit-transition: all .6s ease; 
    -webkit-transition-delay:2s; 
} 

Это не

.kwick a:hover img.grayscale{ 
    -webkit-filter: grayscale(0%); 
    -webkit-transition-delay:2s; 
    -webkit-transition: all .6s ease; 
} 

Answer 2

Может быть -webkit-переход задержки свойство может быть полезным для вас,

попробовать это:

.grayscale img { 
    transition-delay: 2s; 
    -webkit-transition-delay: 2s; 
}