3

这个想法是在您停止悬停（而不是整个项目）之后仅淡出动画本身。.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：这是我正在寻找的效果。

4

3 回答 3

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;
}
于 2013-09-17T21:07:12.977 回答
1

我不太确定我是否理解这个问题，如果您可以发布一个 jsfiddle 或其他一些非常有用的代码。但是按照你所说的，我有一个可能会感兴趣的选项：

一个小jquery 

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

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

“2000”是2000ms，等于2秒；您可以在闲暇时进行调整。

在这里查看

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

在这里查看

于 2013-09-17T20:10:13.243 回答
0

怎么样

.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/

于 2013-09-17T20:20:59.243 回答