1

私は次のCSSコードを持っています:

@keyframes hvr_shadow
{
    from
    {
        box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
    }

    to
    {
        box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
    }
}

@-moz-keyframes hvr_shadow /* Firefox */
{
    from
    {
        -moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
    }

    to
    {
        -moz-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
    }
}

@-webkit-keyframes hvr_shadow /* Safari and Chrome */
{
    from
    {
        -webkit-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
    }

    to
    {
        -webkit-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
    }
}

#gallery .fancybox
{
    border: 1px solid #333;
    display: block;
    padding: 0;
    margin: 0;
    height: 138px;
    -moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
    -webkit-box-shadow: 0px 0px 0px rgba(60, 60, 60, 0.5);
box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
}

#gallery .fancybox:hover
{
    animation: hvr_shadow 700ms;
    -moz-animation: hvr_shadow 700ms; /* Firefox */
    -webkit-animation: hvr_shadow 700ms; /* Safari and Chrome */
    -o-animation: hvr_shadow 700ms; /* Opera */
}

アニメーションが動作している間、しばらくすると影は自動的に初期設定に戻ります。

マウスがまだ画像をホバリングしている間、アニメーションの設定を維持するにはどうすればよいですか?

ここで Fiddle のデモを見つけることができます: http://jsfiddle.net/haX8j/

4

2 に答える 2

1

実際には、トランジションを使用する方が良いと思います。それははるかに簡単で、Firefox で動作し、リンクから移動すると正しくフェードアウトします:

.link
{
    -moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
    -webkit-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
    box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);

    -moz-transition: all 0.7s;
    -webkit-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;
}
.link:hover
{
    -moz-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
    -webkit-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
    box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
}

ここにフィドルの例があります。効果をより明確に確認できるように、影を大きくしました: http://jsfiddle.net/DYdZs/

于 2012-09-25T12:02:11.817 に答える
1

これで問題が解決します：

-webkit-animation: hvr_shadow  700ms .1s 1 ease-in-out normal forwards;
-moz-animation: hvr_shadow  700ms .1s 1 ease-in-out normal forwards;
-o-animation: hvr_shadow  700ms .1s 1 ease-in-out normal forwards;
animation: hvr_shadow  700ms .1s 1 ease-in-out normal forwards;

JS フィドル: http://jsfiddle.net/haX8j/1/

于 2012-09-25T11:36:40.883 に答える