CSS3 animation on hover not stopping on last frame

Question

I'm trying to brighten an image (from 20% to 100%) when you hover over it, capping the brightness at 100% after the animation and gradually returning it's brightness to 20% when the mouse is not hovering there.

I tried to use animation-fill-mode: forwards; but it doesn't seem to have any effect, the image keeps resetting or becaming completely white after the animation ended, if i move the mouse away it resets to 20% brightness immediately.

<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

You could achieve a similar effect with transition instead of the keyframe which will let the hovered state fade out instead of jumping back to 20%:

JS Fiddle

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

Answer 2

Seems like a bug with the -webkit-filters. I've steered clear of them before personally. Does the following produce a close enough effect to what you're looking for?

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

Why not to use CSS transition ?

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