Get rid off css jitter on animation

Question

could anybody help me out how to get rid of the css jitter?

HTML here:

<div class="carousel-inner">
  <div class="item">
  </div>
</div>

CSS here:

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.item {
  background-image: url(https://images.unsplash.com/photo-1462834026679-7c03bf571a67?dpr=1&auto=format&fit=crop&w=1500&h=989&q=80&cs=tinysrgb&crop=);
  background-position: right bottom;
  background-size: 100% 100%;
  animation: wdszoom0 5s linear 0s infinite alternate;
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
}
@-webkit-keyframes wdszoom0 { 100% { background-size: 120% 120%; }}

Fiddle here: https://jsfiddle.net/kybernaut/zkzod6wh/2/

I have read this and that, but didn't helped me out:

score 2 · Accepted Answer · answered Sep 26 '17 at 07:49

2

It is better to animate the transform property as it is much smoother. In this example I changed the background-size with transform: scale.

@-webkit-keyframes wdszoom0 { 100% { transform: scale(1.1) }}

You can read more about smooth animations in this article.

answered Sep 26 '17 at 07:49

Florin Pop

5,105
3
25
58

thanks a lot, I haven't thought about doing it as a transform ;) – Karolína Vyskočilová Sep 27 '17 at 21:39
but what if I want to apply it only to the background of the item not to the whole content? – Karolína Vyskočilová Sep 27 '17 at 21:44
Then you might want to think of having a wrapper which you can animate, and keep the content still... :) – Florin Pop Sep 28 '17 at 06:10
If the wrapper is `.item` with the animation and the content is within `.item > .content` doesn't work.. – Karolína Vyskočilová Sep 28 '17 at 10:18

Get rid off css jitter on animation

1 Answers1