TechQA.

background-size animation is going jerky

246 views Asked by At

I'm just trying to animate a background but it is moving weirdly
anyone has encountered a similar issue?

thank you so much in advance =) 

.bkg {
  width: 100vw;
  height: 600px;
  background-image: url("https://ilcastellovolante.it/wp-content/uploads/2021/04/IMG_0593-scaled.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  animation: example 3s infinite;
}

@keyframes example {
  from {background-size: 100% auto;}
  to {background-size: 102% auto;}
}
<body>
<div class="bkg"></div>
</body>

css animation background-size
Original Q&A
1

There are 1 answers

0
Temani Afif On BEST ANSWER

This is due to the centering. better consider an extra layer and animate scale()

.bkg {
  height: 600px;
  position:relative;
  overflow:hidden;
}
.bkg:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: url("https://ilcastellovolante.it/wp-content/uploads/2021/04/IMG_0593-scaled.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  animation: example 3s infinite;
}

@keyframes example {
  to {transform:scale(1.02)}
}
<div class="bkg"></div>

Related Questions in CSS

Related Questions in ANIMATION

Related Questions in BACKGROUND-SIZE

Popular Questions

Trending Questions