CODEWITHSUNDEEP
csscss-animations
Karolína Vyskočilová
Karolína Vyskočilová

Reputation: 1325

Get rid off css jitter on animation

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:

Upvotes: 0

Views: 4160

Answers (1)

Florin Pop
Florin Pop

Reputation: 5135

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.

Upvotes: 2

Related Questions