CSS background-анимация позиции справа налево

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

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

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

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

8
background-image background-position css html jquery

5 ответов

Вы можете попробовать использовать 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/

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

18

рабочая ссылка: 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>

стиль.css:

img{
  background-position:right;

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

нет JAVASCRIPT, нет событий, но мы получаем то, что хотим!

1

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

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 */
}

демо

для запуска анимации при загрузке вы можете добавить класс в 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;
  }
}
0

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

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

класс:

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

вы можете изменить значение" Left " acc. на позицию, которую вы хотите дать.

-1

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

проверить эта скрипка

-2