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

我不太清楚我理解这个问题，如果你可以发布一个jsfiddle或更多的代码，这将非常有用。但是按照你所说的，我有一个可能感兴趣的选项：

有点Jquery

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

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

“2000”为2000ms，等于2秒;你可以随意调整。

查看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;
}

查看here

Answer 2

目前我认为如果不添加其他元素，这是不可能的。

但是如果你愿意添加另一个（不可见的）元素，你可以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;
}

Answer 3

怎么样

.item{
    transition: all 400ms ease-out; 
    box-shadow: 0 0 8px 3px red;
    border: 2px solid red;
}
.item:hover{
    transition: all 200ms ease-in; 
    box-shadow: 0 0 8px 3px #7700ff;
    border: 2px solid #7700ff;
}

您可以根据需要更改属性。

请参阅此http://jsfiddle.net/FPLjM/

淡出CSS3动画

jsFiddle

3 个答案: