Как сделать плавное движение фона?

Question

[Андрей Барчук]

Народ помогите сделать плавное движение фона как тут: pacifico-html.cmsmasters.net
Нужно только для атмосферной картинки сверху без слайдеров и т.д.
Делал через 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

[Valery]

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

Answer 2

[teslor]

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