Fade out a CSS3 animation

Question

The idea is to fade out only the animation itself, after you stop hovering the .item (not the entire item).

I've tried the following CSS:

.item{
    box-shadow: 2px 2px 6px rgba(0,0,0,.5);
    -webkit-transition: -webkit-animation 1s;
    -webkit-animation: none;
}

.item:hover{
    -webkit-animation: party_nav_alt2 1s infinite linear;        
}

@-webkit-keyframes party_nav_alt2 {
    0% {box-shadow: 0 0 8px 3px red;}
    20% {box-shadow: 0 0 8px 3px yellow;}
    40% {box-shadow: 0 0 8px 3px cyan;}
    60% {box-shadow: 0 0 8px 3px #7700ff;}
    80% {box-shadow: 0 0 8px 3px white;}
    100% {box-shadow: 0 0 8px 3px red;}
}

But it didn't work.

Solutions with jQuery are also welcome.

EDIT: The following is a demo to see what I mean. It does the effect but always fades out with a red color:

jsFiddle

EDIT 2: This is the effect that I was looking for.

Answer 1

Currently I believe this is impossible without adding another element.

However if you are willing to add another (invisible) element, you could do something like this, which toggles the opacity of an element the same size and position with the animating shadow on hover

.item{
    height: 100px;
    width: 100px;
    background: gray;    
}
.animation {
    box-shadow: 2px 2px 6px rgba(0,0,0,.5);
    -webkit-transition: -webkit-animation 1s linear ease-out;
    -webkit-animation: none;
    transition: all 0s ease-out;
    width:100%;
    height:100%;
    background:transparent;
    transition: all 1s ease-in; 
    -webkit-animation: party_nav_alt2 1s infinite linear;
    opacity:0;
}
.animation:hover{
    opacity:1;
}

Answer 2

I'm not too sure i understand the question, if you could post a jsfiddle or some more code that would be very helpful. But going what you've said i have an option which may be of interest using:

A little Jquery

$( ".item" ).mouseover(function() {
    $( this ).fadeIn( 2000 );
});

$( ".item" ).mouseleave(function() {
    $( this ).fadeOut( 2000 );
});

"2000" being 2000ms which is equal to 2 seconds; you can adjust at your leisure.

Check it out here

OR CSS

.item {
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;

}

.item:hover {
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    opacity: 0.25;
}

Check it out here