CODEWITHSUNDEEP
csscss-animations
Agent Zebra
Agent Zebra

Reputation: 4550

CSS3 Animation: How do I create smooth movement of background image? Seems to be a Chrome only issue

Trying to smoothly animate a div's background image #bg2 over a short pixel distance (while a clip path animates over it). I'm not able to get the image to move smoothly, it jitters and judders. The clip path animation is fine.

I've tried different easing (linear / ease-in-out etc) suggested in another SO thread, and also extending the distance it needs to move, but it still seems to jump pixel by pixel (sort of), rather than move smoothly. (Although, extending the move distance isn't an option in the actual use case).

How can smooth movement of the cat background image #bg2 be accomplished? Thanks.

** Edit: It's totally smooth for me in Firefox, for me it's jittery in Chrome 91.0.4472.114 on Mojave 10.14.6, and less jittery in Safari. For other it seems to be smooth on Chrome also. Hmmm...

var clickTag = "#";
#main-container {
  position: absolute;
  width: 970px;
  height: 250px;
  left:-200px;
  box-sizing: border-box;
  background: #333;
  overflow:hidden; perspective: 800px;
  border:1px solid #ccc;
}

div, img {
    position: absolute;
    background-repeat:no-repeat;
    width: 970px;
    height: 250px;
    z-index: 4;
    background-size: 970px 250px;
}


#bg2{
    width: 970px;
    height: 250px;
    z-index:2;
    background-image:url('https://i.sstatic.net/6EcDu.jpg');
    -webkit-clip-path: circle(9% at 682px 110px);
    clip-path: circle(9% at 682px 110px);
    transform: translateY(20px);
    background-position: -5px -10px;
}

#bg2{animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;-webkit-animation: groww 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;}

@-webkit-keyframes groww {
 0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);-webkit-clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
 100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);-webkit-clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}

@keyframes grow {
 0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
 100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}
<a href="javascript:window.open(window.clickTag)">
<div id="main-container" class="animate">
    <div id="bg2"></div>
</div>
</a>

Upvotes: 0

Views: 265

Answers (1)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

I'm a bit curious about why having a large banner while not displaying it all.

Anyways, I provide another way of animating, basically just changing the height. Hopefully that could give some ideas.

I removed the width to make it slightly more responsive.

The animation somewhat jittery in this solution, but I guess that it depends on your bezier curve. So perhaps that's the issue all along?

var clickTag = "#";
#main-container {
  position: relative;
  height: 250px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background-color: #333;
}

#bg2 {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);

  height: 40%;
  aspect-ratio: 1;
  border-radius: 50%;

  background-image: url('https://i.sstatic.net/6EcDu.jpg');
  background-position: right 25% center;
  
  animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

@keyframes grow {
  to { height: 80%; }
}
<a href="javascript:window.open(window.clickTag)">
  <div id="main-container">
    <div id="bg2"></div>
  </div>
</a>

Upvotes: 1

Related Questions