jquery - 淡出 CSS3 动画

Question

这个想法是在您停止悬停 .item 之后仅动画本身淡出。 (不是整个元素)。

我尝试了以下 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;}
}

但是没有用。

也欢迎使用 jQuery 解决方案。

编辑:下面是一个演示，看看我的意思。它具有效果，但总是以红色淡出:

jsFiddle

编辑 2:This is the effect我正在寻找的。

Answer 1

目前我认为如果不添加另一个元素这是不可能的。

但是如果你愿意添加另一个(不可见的)元素，你可以做 something like this ，它会切换与悬停动画阴影相同大小和位置的元素的不透明度

.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;
}