4

I'm playing around with a CSS3 Gradient and trying to move it in on mouseover. As you can see from this jsFiddle, the CSS gradient appears on :hover; however, it seems to flickers a few times.

FYI, so far, this has been tested on Chrome v30 / Firefox v24 / Safari v5.1.

Separately, both have turned out to be working solutions, but combined, I get the flickering effect.

nav li {
    width: 90px;
    padding-right: 15px;
    padding-left: 15px;
    height: 30px;
    border: 1px solid #000;
    float: left;
    list-style-type: none;

    background-position: -200px -200px;
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
}

nav li:hover {
    background-position: 200px 0;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwNjA2MCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(96,96,96,0.2) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(96,96,96,0.2)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33606060',GradientType=0 );
}

I've tried limiting the animation using animation-iteration-count, but as I've figured out, this only seems to work with animations and @keyframes. I've also read on a few different sites that @keyframes don't yet support CSS Gradient animation.

4

3 回答 3

4

问题是背景重复。您必须将其设置为不重复，以便在悬停之前不可见背景

background-repeat: no-repeat;

JSFiddle

于 2013-10-30T14:12:20.327 回答
4

闪烁效果是由于您的元素高度 ( 30px) 和您为背景 ( -200px-> 0px) 给出的偏移量之间的差异造成的。

基本上，它在一秒钟的转换中滚动超过视图六次（因为 30 进入 200 六次），这就是给你闪烁效果的原因。如果稍微增加过渡时间，例如 5 秒，您可以更轻松地看到效果；这将使发生的事情更加明显。（显然，您可以在完成测试后将其设置回来）

如果您将 inital 更改background-position为-30px而不是-200px，您只会让它滚动到视图中一次，因此不会闪烁。

希望有帮助。

于 2013-10-30T14:12:42.867 回答
1

正如其他答案中提到的那样，问题在于background-repeat您的背景位置非常大。

这是一个更新的小提琴，我相信你正在努力实现。

请注意，我已经删除了所有多余的 CSS 规则——所有主流浏览器现在都支持不带前缀的渐变和过渡，这使得所有这些前缀都变得无用（还应该注意的是-ms-transition，-ms-linear-gradient它们从未存在过，因为 IE 没有抢先一步。. . 你知道在 Chrome 中定义渐变至少有三种不同的方法吗？）

除了清理之外，我将背景定义移动到元素的样式（而不是其悬停样式）以确保“过渡”是可能的，否则它只会捕捉到空白。我已经申请background-repeat:repeat-x了只允许水平重复，并调整了，background-position以便在初始状态下渐变几乎完全离开底部，并且悬停状态是它在正确的位置。这会产生平滑而准确的过渡。

希望这可以帮助！

于 2013-10-30T14:21:05.630 回答