Вопрос по background-image, css, html, jquery, background-position – CSS background-position анимировать справа налево

9

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

background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;

но когда страница загружена, я хочу, чтобы фон был анимирован, чтобы он располагался слева. Это должно взять, например. 2 секунды и только должны быть сделаны один раз. (изображение должно быть расположено слева).

Я не хочу использовать какие-либо события мыши или псевдоклассы. Есть ли способ оживить его с помощью только CSS? Я попытался найти решение с ключевыми кадрами, но безуспешно.

Просто анимируйте свойства background-Position с помощью CSS3 Chandrakant
добавьте задержку в позицию css3 или создайте обработчик события jQuery «Load», чтобы определить, загружается ли изображение перед переходом. Karl Adler
stackoverflow.com/questions/12340130/... adeneo

Ваш Ответ

5   ответов
20

Вы можете попробовать использоватьthis tutorial: CSS Фоновая Анимация

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}

html { 
    width: 100%; 
    height: 100%; 
    background-image: url(background.png);
    background-position: 0px 0px;

    animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    -webkit-animation: animatedBackground 10s linear infinite;
    -ms-animation: animatedBackground 10s linear infinite;
    -o-animation: animatedBackground 10s linear infinite;
}

Пример здесь: http://jsfiddle.net/verber/6rAGT/5/

Надеюсь, это то, что вам нужно)

Да!!! это абсолютно то решение, которое я искал. Спасибо огромное!!! Maexwell
анимация работает вечно, поэтому я немного ее поменял. теперь он запускается только один раз и не сбрасывается в положение начала: -> animation: animatedBackground 10s linear forward; Maexwell
-1

Вы отметили Jquery. Так что предоставит вам функцию Jquery для этого.

$( "#ID" ).animate({
    left: "50px",
     }, 2000);

Для класса:

 $( ".class" ).animate({
        left: "50px",
         }, 2000);

Вы можете изменить значение «Левый» в соотв. в положение, которое вы хотите дать.

Я просто даю свое решение. Бадди. Здесь я изменил его для вас с помощью класса CSS. И анимация также работает на изображение тоже. Так что просто обновляйтесь, а не спорите. Harsh
И лучше заключить его в div для отзывчивости во всех браузерах. Harsh
прочитайте вопрос снова, приятель, он не просит вас оживить div. На самом деле @adeneo привел очень хороший пример этого. Просто следуйте по его ссылке в вопросе в комментариях. Atal Shrivastava
но таким образом вы не анимируете положение фонового изображения, на самом деле вы анимируете положение div. Atal Shrivastava
0

вам нужно использовать анимацию и числа для значения, чтобы он мог рассчитать каждую позицию между началом и концом. в основном это будет:

html {
  background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
  background-size:10%;/* demo purpose */
  background-position: 100% 0;
  animation: bgmve 2s;
}
@keyframes bgmve {
  to {background-position: 0 0;} /* make it short */
}

DEMO


Чтобы запустить анимацию при загрузке, вы можете добавить класс в HTML через JavaScript:

    onload=function() {
      var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

    root.setAttribute( "class", "move" );

}

и CSS превращается в:

html {
  background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
  background-size:10%;
  background-position: 100% 0;
}
.move {
  animation: bgmve 2s;
}
@keyframes bgmve {
  to {background-position: 0 0;
  }
}
1

рабочая ссылка:http://sagiavinash.com/labs/tests/css_anim/

Это неортодоксальный трюк.

<html>
<head>
<style>
    .img{
      width:1000px;
      height:500px;
      background:url(1.jpg) no-repeat left;
      transition:background-position 1s;
      -ms-transition:background-position 1s;
      -moz-transition:background-position 1s;
      -o-transition:background-position 1s;
      -webkit-transition:background-position 1s;    
      }
</style>
</head>
<body>
    <div class="img"></div>
    <link rel="stylesheet" type="text/css" href="style.css">
</body>
</html>

style.css:

img{
  background-position:right;

то, что происходит здесь, изначально CSS упоминается в<style> оказано. позже, так как внешняя таблица стилей находится в теле непосредственно перед</body>, Таким образом, style.css загружается после загрузки ресурсов в. поэтому в реализации CSS есть задержка, которая позволяет нам применять переход CSS.

НИКАКОГО JAVASCRIPT, НИКАКИХ СОБЫТИЙ все же мы получаем то, что хотим!

-2

задаватьposition:relative; к изображению сleft:50%; например, для события document.ready уменьшите левое значение, например, до. 0 используя jquery animate.

Проверять, выписыватьсяэта скрипка

благодарю вас! действительно простое решение;) Maexwell

Похожие вопросы