Question

当你将鼠标悬停在它上面时，我试图使图像变亮（从20％到100％），在动画后将亮度限制在100％，当鼠标没有悬停在那里时，逐渐将亮度恢复到20％。

我尝试使用动画填充模式：转发;但它似乎没有任何效果，图像在动画结束后保持重置或完全变白，如果我移动鼠标，它会立即重置为20％亮度。

for (var i = 1; i < X.length; i++)
    S = S.replace(X[i - 1] + '-' + X[i], X[i - 1] + ',' + X[i]);

Answer 1

您可以使用myStruct代替transition来实现类似的效果，这会让悬停状态淡出而不是跳回到20％：

JS Fiddle

keyframe

Answer 2

看起来像-webkit-filters的错误。我个人之前已经避开了它们。以下是否会产生足够接近您正在寻找的效果？

HTML

<div class="fading">
<img src="URL" width="250"/>
</div>

CSS：

.fading {
    background-color: black;
    display: inline-block;
}
.fading img {
    display: block;
    opacity: 0.2;
    transition: opacity 2s linear;
}
.fading:hover img {
    opacity: 1;
}

http://jsfiddle.net/yjLuwn16/2/

Answer 3

为什么不使用CSS过渡？

HTML：

<img class="fading" src="http://lorempixel.com/400/200/sports/"/>

CSS：

img.fading {
    /* Filter */
    -webkit-filter: brightness(20%);
    -moz-filter: brightness(20%);
    -o-filter: brightness(20%);
    -ms-filter: brightness(20%);
    filter: brightness(20%);
    /* Transition */
    -webkit-transition: all 2000ms ease-in-out;
    -moz-transition: all 2000ms ease-in-out;
    -o-transition: all 2000ms ease-in-out;
    -ms-transition: all 2000ms ease-in-out;
    transition: all 2000ms ease-in-out;
}
img.fading:hover {
    /* Filter */
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
    filter: brightness(100%);
}

悬停时的CSS3动画不会在最后一帧停止

3 个答案: