• Главная
  • Карта сайта
Не найдено

Анимация background-position + демо, CSS 3

Опубликовано: 06.09.2018

видео Анимация background-position + демо, CSS 3

CSS3 Flip 3D Animation For Boxes and Cards HTML5 Tutorial

Несмотря на то, что я очень давно занимаюсь разработкой сайтов, не раз бывают моменты, когда натыкаешь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 тут ни к чему */ }

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

Свойство 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).

Смотрите также

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss