Animation transition effect need to be reduce on hover - css

Question

I am trying to create animation, where on hover i am changing image from default image to hover image.
I am using CSS3 animation and keyframe properties,
CSS
.fader img {
transition: all 1s;
}
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.fader:hover img:first-child {
animation: toggle 2s infinite alternate 2s;
}
.fader:hover img:last-child {
opacity: 1;
animation: toggle 2s infinite alternate;
}
#keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
HTML
<div class="fader">
<img src="http://placehold.it/200x200/000000" />
<img src="http://placehold.it/200x200/FFFFFF" />
</div>
I have created fiddle for the same
This is working fine , I need to do little change.
when one image change to next it leaves impression of the last one.
I am looking for the transition without footprint of last.
As given in fiddle , before black image comes, white image get slowly fade out then black comes, same happen from black to white. I want change without fade out effect.
I have tried
animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out
but that doesn't work,
also i reduced delay time
animation-delay: .5s
but still that doesn't work. any idea ?