background-size transition on hover causes chrome to “shake” background image

问题

I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have not checked it in other browsers yet. Is there a way to make it smoother, so it doesn't "shake" on zoom in?

HTML

<div id="example">
    test
</div>

CSS

#example {
   background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg);

    background-position: center center;
    width: 250px;
    height: 250px;
    transition:all 1000ms ease;
    background-size: 100% auto;
}

#example:hover {
    background-size: 160% auto;
}

回答1:

just use transform, scale.

so just instead of setting the bg image to 160% use

transform:scale(1.5);

some information about the transform css property you can find here

to use the transform scale in your case you will need a wrapper with overflow hidden so just the inner div gets bigger and cut of by the outer div.

see updated fiddle.

greetings timmi

回答2:

Used transform scale instead of a background-size change transition: https://jsfiddle.net/qyh6nbwt/

transform: scale(2, 2);

回答3:

So I made this my mission to figure this out, turns out it wasn't quite as simple of a fix as I thought.

It's a little dirty, but you need to frame your div within a div like this:

<div class="example">
    <div></div>
    <p>test</p>
</div>

Then from here, you can target the zooms more accurately, like this:

div.example {
    height: 250px;
    width: 250px;
    overflow: hidden;
    position: relative;
}

div.example > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.example:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

You can adjust the zoom and speed using the scale and transition properties.

Here is a working fiddle to demonstrate. Hope this helps, I checked in Chrome/Safari/Firefox and it seems to work pretty well.

来源：https://stackoverflow.com/questions/30218476/background-size-transition-on-hover-causes-chrome-to-shake-background-image

标签

css

css3

background-image

transition

background-size