Анимированное изображение (свойство background-position) на фоне посредством только CSS

CSS

Несмотря на то, что я очень давно занимаюсь разработкой сайтов, не раз бывают моменты, когда натыкаешьcя на какой-то интересный эффект или возможность, которой казалось бы совсем недавно еще не было.

Как раз такой пример перед вами. Давно-давно передо мной стояла задача сделать анимированный фон, но сколько с ним было трудностей, приходилось колдовать с JavaScript, искать какие-то дополнительные функции для него. И даже после всех проделанных усилий анимация то ли притормаживала, то ли ещё что-то.

А сейчас это в два счета делается через CSS.

О том, как сделать такой передвигающийся фон, читайте ниже

Для начала создайте какой-нибудь блок, например <div id="fon"></div>. И просто копируете следующий код, можете даже не менять в нём ничего.

@keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        background-position: -600px 600px /* анимируем свойство background-position */
    }
}
/* Mozilla Firefox 5.0+ */
@-moz-keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        background-position: -600px 600px
    }
}
/* Safari 4.0+, Chrome 4.0+ */
@-webkit-keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        background-position: -600px 600px
    }
}
/* Opera 12.0+ */
@-o-keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        background-position: -600px 600px
    }
}
/* не нужно использовать префикс -ms, так как свойства keyframes и animation поддерживаются с версии IE10 без префикса */
#fon{
	height: 340px; /* задаем произвольную высоту и ширину блока */
	width:100%;
	background-image: url('URL вашего фонового изображения');
	animation: animatedBackground 60s linear infinite;
	-moz-animation: animatedBackground 60s linear infinite;
	-webkit-animation: animatedBackground 60s linear infinite;
 	-o-animation: animatedBackground 60s linear infinite;
	/* так же, как и с @keyframes, префикс -ms тут ни к чему */
}

Что касается поддержки браузерами:

Свойство CSS
@keyframes	43.0 4.0 -webkit-	9.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit- 12.0 -o-	10.0
animation	43.0 4.0 -webkit-	9.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit- 12.0 -o-	10.0

Также тестировал на iOS6 (да, у меня оно стоит:) — фон оставался неподвижным (как на стандартном Safari, так и в приложении Chrome).

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.