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 を使用したソリューションも歓迎します。

編集：以下は、私が何を意味するかを確認するためのデモです。効果はありますが、常に赤色でフェードアウトします。

jsフィドル

EDIT 2 :これは私が探していた効果です。

4

3 に答える 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;
}
于 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 に答える