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

Народ помогите сделать плавное движение фона как тут: 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 но не нашел...
  • Вопрос задан
  • 1964 просмотра
Пригласить эксперта
Ответы на вопрос 2
batareika
@batareika
Как вариант, можно увеличивать не размер фона, а сам блок через scale: codepen.io/anon/pen/waeVGw
Ответ написан
Комментировать
@teslor
IE не поддерживает анимацию background-size, про scale вам уже ответили.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы