Question

我有以下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 */
}

当动画正常工作时，阴影会自动返回主要设置。

当鼠标还悬停在图像上时，如何保持动画的设置？

在这里你可以找到一个小提琴演示：http://jsfiddle.net/haX8j/

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

Answer 2

实际上我认为你最好使用过渡。它更简单，它适用于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/

CSS3动画|简单的问题

2 个答案: