There is such a block with background and effect:

html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .box { width: 100%; height: 100%; background: url(http://www.nasa.gov/sites/default/files/thumbnails/image/potw1441a.jpg) center no-repeat; -webkit-background-size: 150%; background-size: 150%; transition: all 5.27s ease-in-out; } .box:hover { -webkit-background-size: 100%; background-size: 100%; } 
 <div class="box"> </div>

When you hover on the block, the background starts to twitch and somehow change with delays.

Can this be somehow corrected (smoothed), if we apply the transition specifically to background-size (from 150% to 100%)?

PS: With transform: scale; I know the solution, thanks!

  • I suspect without scale in any way. As far as I understand this content will be in this container, but then you can throw the background in :before and it will be scaled) - Artem Gorlachev
  • @ArtemGorlachev, Thank you =))))) "With transform: scale; I know the solution," - HamSter

3 answers 3

You see "jerking" because you are using a very long animation time. If you put 1 second, the animation runs smoothly: https://jsfiddle.net/0c4mqLp8/ .

Experiment with the parameters: all 5s ease or all 1s ease-in-out , for example. Both options work smoothly for me.

Why jumps occur: your picture is aligned to the center of the block. Changing the scale, the width of the picture changes to even, then to an odd value. Pixel is the smallest unit of measurement: the center divides the picture in half and at an even value the picture is divided equally, and at odd 0.5 pixels remain, which give a jerk to the background image - it moves to the left, then to the right.

  • Perhaps my false explanation is a personal guess. - doubleui
  • Twitching is all the same. It's just faster. You can see if you look closely. - Telion
  • all 5s ease less, but still there. I also read about setting a rounded value for transition (i.e. not 1.275, but 1), but something does not help here. - HamSter
  • You can try @keyframes , specifying the desired values ​​from 0 to 100% of the frames. But this will inflate CSS at times. Or use an additional JS. Here is an example of a library (I haven't tried it myself): github.com/branneman/… . You can try to intercept the background-size value, wrapping it in, conditionally, var size = parseInt(size, 10); if (size % 2 !== 0) { size += 1; } var size = parseInt(size, 10); if (size % 2 !== 0) { size += 1; } var size = parseInt(size, 10); if (size % 2 !== 0) { size += 1; } , omitting odd values ​​(or vice versa). - doubleui
  • I think it would be more correct then to make an additional block in which we will resize the image itself, and not the background one. You can use scale, etc. - Telion

Try to make the Bezier curve smoother at the beginning and end:

 -webkit-transition: all 5s cubic-bezier(.6,0,.4,1); transition: all 5s cubic-bezier(.6,0,.4,1);

enter image description here

Javascript will not give you more performance than CSS , because CSS transformation is done using hardware acceleration .

Here is a resource for generating Bezier curves: http://cubic-bezier.com/#.6,0,.4,1

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; box-sizing: conten-box; } .box-c { width: 100%; height: 100%; position: relative; overflow: hidden; } .box { width: 100%; height: 100%; background: url(http://www.nasa.gov/sites/default/files/thumbnails/image/potw1441a.jpg) center no-repeat; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 5s cubic-bezier(.6,0,.4,1); transition: all 5s cubic-bezier(.6,0,.4,1); position: absolute; background-size: 100%; top: 0; left: 0; right: 0; bottom: 0; } .box:hover { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1); transform: scale(1); } 
 <div class="box-c"> <div class="box"></div> </div>

  • You also did not read the assignment. And js has nothing to do with it, he wasn’t even talking about it at all - HamSter

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; box-sizing: conten-box; } .box-c { width: 100%; height: 100%; position: relative; overflow: hidden; } .box { width: 100%; height: 100%; background: url(http://www.nasa.gov/sites/default/files/thumbnails/image/potw1441a.jpg) center no-repeat; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 5s cubic-bezier(0.7, 0.72, 0.71, 0.72); transition: all 5s cubic-bezier(0.7, 0.72, 0.71, 0.72); position: absolute; background-size: 100%; top: 0; left: 0; right: 0; bottom: 0; } .box:hover { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1); transform: scale(1); } 
 <div class="box-c"> <div class="box"></div> </div>

You can still try as an option

  • With scale I know the solution !!! The question was "transition to background-size?" Read carefully! - HamSter