Css hover delay (filter)

Question

Я использую фильтр оттенков серого для изображения на моей странице и очень насыщенный фильтр для зависания.

Когда изображение зависнет, я хочу, чтобы img имел задержку в 2-3 секунды до тех пор, пока он не будет насыщен.

Мои коды:

.image2{ 
    max-width:70%; 
    border-radius: 5px; 

    filter: grayscale(1); 
    -webkit-filter: grayscale(1); 
    -moz-filter: grayscale(1); 
    -o-filter: grayscale(1); 
    -ms-filter: grayscale(1); 
} 
.image2:hover{ 
    filter: saturate(500%),2s; 
    -webkit-filter: saturate(500%); 
    -moz-filter: saturate(500%); 
    -o-filter: saturate(500%); 
    -ms-filter: saturate(500%); 
} 

Я пытался играть с transition-delay и несколько других, но никто не работал.

Спасибо за ответ :)

Answer 1

Что вам нужно transition-delay:

.image2 { 
    -webkit-transition: all .4s ease; 
    -moz-transition: all .4s ease; 
    -o-transition: all .4s ease; 
    transition: all .4s ease; 
    -webkit-transition-delay: 3s; 
    transition-delay: 3s; 
} 

Это довольно просто, на самом деле: когда некий CSS свойство элемента изменяется, перед применением браузеров изменение будет проверять существует transition, установленный для этого конкретного свойства CSS. Если есть, браузер проверит наличие transition-delay. Но если нет transition, нечего задерживать, поэтому transition-delay бесполезен.

В приведенном выше примере сам переход установлен на 0,4 секунды, и он начнется через 3 секунды после того, как вы наведете (но остерегайтесь, чтобы вам нужно навести элемент на 3 секунды, иначе переход будет отменен).

Я добавил transition-delay 3 секунды до классическийfilter example, чтобы почувствовать, как это все ведет себя.