How to make the background move smoothly?

Question

JavaScript

People help to make a smooth movement of the background like here: pacifico-html.cmsmasters.net
Only needed for an atmospheric picture on top without sliders, etc.
I did it with css:

header {
    display: block;
    height: 100%;
    min-height: 600px;
    position: relative;
    background: url(../images/top2.jpg) no-repeat center;
    background-size: 100% 100%, cover;
    -webkit-animation: head_slide 25s infinite;
  -moz-animation: head_slide 25s infinite;
  -o-animation: head_slide 25s infinite;
  animation: head_slide 25s infinite;
}

 @-webkit-keyframes head_slide {
 0% {background-size: 100%;}
 50% {background-size: 120%;}
 100% {background-size: 100%;}
}
 @-moz-keyframes head_slide {
 0% {background-size: 100%;}
 50% {background-size: 120%;}
 100% {background-size: 100%;}
}
 @keyframes head_slide {
 0% {background-size: 100%;}
 50% {background-size: 120%;}
 100% {background-size: 100%;}
}
 @keyframes head_slide {
 0% {background-size: 100%;}
 50% {background-size: 120%;}
 100% {background-size: 100%;}
}

Работает нормально только в Firefox. В Chrome работает но не плавно. В IE вообще не работает.
Подскажите решение. Искал на сanvas но не нашел...

Answer 1

Как вариант, можно увеличивать не размер фона, а сам блок через scale: codepen.io/anon/pen/waeVGw

Answer 2

IE не поддерживает анимацию background-size, про scale вам уже ответили.