CSS3 анимация при зависании не останавливается на последнем кадре

Question

Я пытаюсь скрасить изображение (от 20% до 100%), когда вы наведите курсор на него, закрыв яркость на 100% после анимации и постепенно увеличивая яркость до 20 %, когда мышь там не витает.

Я попытался использовать режим анимации-fill: forwards; но, похоже, это не имеет никакого эффекта, изображение продолжает восстанавливаться или становиться полностью белым после окончания анимации, если я отключаю мышь, он сразу же сбрасывает до 20% яркости.

<img class="fading" src="/uploads/2015/09/test.jpg"/> 

@keyframes brightup{ 
    0% {-webkit-filter: brightness(20%); 
     } 
    25% {-webkit-filter: brightness(25%); 
     } 
    50% {-webkit-filter: brightness(50%); 
     } 
    75% {-webkit-filter: brightness(75%); 
     } 
    100% {-webkit-filter: brightness(100%); 
     } 
    } 

    img.fading { 
     -webkit-filter: brightness(20%); 
    } 

    img.fading:hover { 
     animation-name: brightup; 
     animation-duration: 2s; 
     animation-timing-function: linear; 
     animation-delay: 500ms; 
     animation-iteration-count: 1; 
     animation-fill-mode: forwards; 
    } 

Answer 1

Вы можете достичь аналогичного эффекта с transition вместо keyframe который позволит парил состояние затухать вместо того, чтобы прыгать обратно до 20%:

JS Fiddle

img.fading { 
    -webkit-filter: brightness(20%); 
    transition: 5s; 
    transition-delay: .5s; 
} 
img.fading:hover { 
    -webkit-filter: brightness(100%) 
} 

Answer 2

кажется ошибка с -webkit-фильтрами. Я лично справился с ними. Получают ли следующие результаты достаточно близко к тому, что вы ищете?

HTML

<div class="fading"> 
<img src="URL" width="250"/> 
</div> 

CSS:

.fading { 
    background-color: black; 
    display: inline-block; 
} 
.fading img { 
    display: block; 
    opacity: 0.2; 
    transition: opacity 2s linear; 
} 
.fading:hover img { 
    opacity: 1; 
} 

http://jsfiddle.net/yjLuwn16/2/

Answer 3

Почему бы не использовать переход CSS?

HTML:

<img class="fading" src="http://lorempixel.com/400/200/sports/"/> 

CSS:

img.fading { 
    /* Filter */ 
    -webkit-filter: brightness(20%); 
    -moz-filter: brightness(20%); 
    -o-filter: brightness(20%); 
    -ms-filter: brightness(20%); 
    filter: brightness(20%); 
    /* Transition */ 
    -webkit-transition: all 2000ms ease-in-out; 
    -moz-transition: all 2000ms ease-in-out; 
    -o-transition: all 2000ms ease-in-out; 
    -ms-transition: all 2000ms ease-in-out; 
    transition: all 2000ms ease-in-out; 
} 
img.fading:hover { 
    /* Filter */ 
    -webkit-filter: brightness(100%); 
    -moz-filter: brightness(100%); 
    -o-filter: brightness(100%); 
    -ms-filter: brightness(100%); 
    filter: brightness(100%); 
}