Geek Answers Handbook

CSS3 Gradient flickers on hover

I play with a CSS3 gradient and try to move it on the mouse. As you can see from this jsFiddle , a CSS gradient appears on :hover; however, it seems to flicker several times.

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

Individually, both turned out to be working solutions, but when combined, I get a 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 tried to limit the animation with animation-iteration-count, but as I understand it, this seems to work only with animations and @keyframes. I also read on several sites that @keyframesdo not yet support CSS Gradient animations.

+4
source share
3

(30px) , (-200px → 0px).

, ( 30 200 ), . , , , 5 ; , . (, , )

inital background-position -30px -200px, , , .

, .

+4

. no-repeat,

background-repeat: no-repeat;

JSFiddle

+4

, - background-repeat .

- Fiddle , , , .

, CSS - gradients transons , ( , -ms-transition -ms-linear-gradient , IE ... , Chrome?)

In addition to cleaning up, I moved the background definition to style styles (rather than hover styles) to ensure that a “transition” is possible, otherwise it just snaps to a space. I applied background-repeat:repeat-xto allow only horizontal repetition, and adjusted background-positionso that in the initial state the gradient was hardly completely removed from the bottom, and the hover state is such that it is in the right place. This gives a smooth and accurate transition.

Hope this helps!

+1
source

More articles:


All Articles