CSS3动画的淡出效果

Question

CSS3动画的淡出效果

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: 这是我要寻找的效果。

- Fabián

3个回答

1

我认为目前在不添加其他元素的情况下这是不可能的。

但如果您愿意添加另一个（不可见）元素，您可以做 类似于这样的，它在悬停时切换与动画阴影大小和位置相同的元素的不透明度。

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

- Zach Saucier

我对那个CSS进行了一些微调，终于找到了我一直在寻找的效果。谢谢伙计！ - Fabián

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/

- wener

opacity 是针对整个标签的。我需要在停止悬停鼠标后停止动画，仅淡出动画（例如我设置的 box-shadow 动画，而不是整个项目）。 - Fabián

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jack · Accepted Answer

我不太确定我理解问题的意思，如果您可以发布一个jsfiddle或更多的代码，那将非常有帮助。但根据您所说，我有一个选项可能会很有用，使用：

一点Jquery

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

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

"

“2000”代表2000毫秒，相当于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;
}

检查一下这里。