Animated background position css

CSS Background Animations

Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks. The following simple CSS snippet animates the background image (via background position) of a given element.

The CSS

We’ll use CSS animations instead of transitions for this effect:

@keyframes animatedBackground < from < background-position: 0 0; >to < background-position: 100% 0; >>

With the animation code in place, now it’s time to apply it to an element with a background image:

The cloud background image within the sample element will elegantly scroll from left to right over a duration of 40 seconds, seamlessly repeating an infinite number of times.

How epic is it that we don’t need to use JavaScript to manage these animations anymore? Of course the mess of vendor prefixes to accomplish the animation sucks, but at least the animations are much more efficient and more easily configurable!

Recent Features

Designing for Simplicity

Send Text Messages with PHP

Incredible Demos

CSS Kwicks

Editable Content Using MooTools 1.2, PHP, and MySQL

Discussion

May I suggest to use multiple background images to create a cool parallax effect in that cloud background?

Wow, great post and very thorough. Out of interest, where did you get the cloud image from? I did a similar tutorial on my blog about using CSS sprites to create a basic button. I guess using the same idea you could even animate the background of the button.

As MaxArt suggested, having multiple (small in file-size) backgrounds could create a cool effect. So I experimented! Check it out: http://www.creativewebgroup.co.uk/library/background.html

As MaxArt suggested, having multiple (small in file-size) backgrounds could create a cool effect. So I experimented! Check it out: http://www.creativewebgroup.co.uk/library/background.html

@keyframes animatedBackground < to < background-position-x:100%; >>

@Bennett_Feely: Found this on the official Mozilla site, which states that the “from” keyframe is most definitely needed: Valid keyframe lists In order for a keyframe list to be valid, it must include rules for at least the times 0% (or from) and 100% (or to) (that is, the starting and ending states of the animation). If both of these time offsets aren’t specified, the keyframe declaration is invalid; as such, it will be ignored by the parser and can’t be used for animation.

Very nice tutorial. Your article, and MaxArt’s comment, encouraged me to create my own version, with parallax effect: Demo:
http://demo.cmorales.es/background-animation/prefixed.html Tutorial (in Spanish):
http://cmorales.es/tutorial/fondo-animado-con-css3/

Hey David, This is indeed an awesome post. I tried it and it felt really cool. However, when i expanded the width to say 1000 or 2000 to fit the screen width, the animation restarts from the 1st frame creating a start effect after some seconds and it doesn’t look like a seamless flow of animation. I hope you got me. Try increasing the width and reducing the animation time(seconds). 🙂

I had the same problem with the stutter when the image reached the end and started over (as described by Priyank Rathod). The problem is either the width of the div or the image itself. You have to create the image in such a way that when it reaches the end within its div (or whatever – in my case it was a TD), it looks exactly as it would as if it were still at the beginning. You essentially have to define the width of the div and create the image to be the exact same width – minus the borders of the div – and the left side of the image has to connect to the right side seamlessly. (I also removed the width and height specs from the css but not sure if that made a difference.)

Nice trick, looking awesome to me. What about the animation done in background all over the page. I means if Image goes smaller then the size of monitor then maybe some trouble will happen.

apology, I came out excellent animation, unfortunately you can only see in firefox, and I can not see it or tablet or chrome, there is a kit for the other browsers, or in this case you could do, you and I hope your answer is urgent

Источник

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

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

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

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

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

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

@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. Преподаватель в школе Нетология.

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

Источник

Анимация графического фона на CSS

Если поставить в фон не фотографию, а абстрактную картинку, например с линиями, то эффект будет даже более интересен.

HTML:

CSS:

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

Бегущие волнистые линии

Анимированные волнистые линии с использованием SVG и CSS

Параллакс эффект при движении мыши

Пример создания простого параллакса, реагирующего на движение курсора мыши

Белый шум на JS

Небольшой JavaScript, создающий белый шум в канвасе

Добавить комментарий:

Комментарии:

Приветствую перекопал кучу сайтов, но нифига не нашел, вдруг тут кто подскажет — задача сделать «прилипший» футер на сайте (с этим справился), а вот вторая задача — как фон футера сделать анимированным (через css) никак не выходит . Вдруг есть мыслишка или решение, буду рад помощи ✌️ а сайте у тебя — просто бомба

• Создание и оформление сайтов
  • Тексты, ссылки и кнопки
  • Вкладки, блоки и списки
  • Секции
  • Меню и аккордеоны
  • Модальные окна
  • Слайдеры и карусели
  • Формы
  • Фото, аудио и видео
  • Фоны и паттерны
  • Картинки и иконки
  • Карты и геолокация
  • Прокрутка и скроллбары
  • Весь сайт
  • HostCMS
  • WordPress
  • Фоновые анимации на JS

  

  Источник

  Читайте также:  License key for php tools