Better css animation

Hey guys, basically I have a tile-able background pattern which is 345pixels in height. I'm trying to animate it moving upwards for a cool effect. Problem is, it gets my laptops fans going! Is there a less intensive way to do this?


At first I used Javascript only, something like this:

var count = 0

setInterval(function() {
  if (count == -345) {
    count = 0
  }

  $('.hero-image').css('background-position', "0 " + count + "px")
  count -= 1
}, 15)

Code (markup):

Then I thought maybe css would make it better, so I tried it like this:

.pattern {
  background-image: url('pattern.png');
  background-size: auto 345px;
  transition: 5175ms background-position;
  transition-timing-function: linear;
}

Code (markup):

var count = 0

setInterval(function() {
  $('.hero-image').css('background-position', "0 " + count + "px")
  count -= 345
}, 5175)

Code (markup):

Is there a better less-demanding way to handle this?

Thanks

 

You mean CSS animation?
#ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
#demo: https://jsfiddle.net/2oLsen5k/

This won't guarantee your laptop fan going slower
Like JS, I believe CSS requires some CPU processing too.

 

Thank you soo much hdewantara!!!

This is perfect, seem's a lot less demanding to me and eliminates the need for js all together.

Really appreciate it man!