Анимация background-position + демо, CSS 3
Опубликовано: 06.09.2018
Несмотря на то, что я очень давно занимаюсь разработкой сайтов, не раз бывают моменты, когда натыкаешьcя на какой-то интересный эффект или возможность, которой казалось бы совсем недавно еще не было.
Как раз такой пример перед вами. Давно-давно передо мной стояла задача сделать анимированный фон, но сколько с ним было трудностей, приходилось колдовать с JavaScript, искать какие-то дополнительные функции для него. И даже после всех проделанных усилий анимация то ли притормаживала, то ли ещё что-то.
Css3 -Fit Background Image, 100% Scale with Css3
А сейчас это в два счета делается через 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 тут ни к чему */ } |
Что касается поддержки браузерами:
| @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).
Смотрите также
