цикл анимации webkit css3

Question

Я сделал фон для анимации слева направо. Все работает нормально, но когда background-image достигает правильного, анимация начинается снова.

Как я могу заставить его работать непрерывно, чтобы казалось, что он движется слева направо всегда (без перерывов)?

Вот ссылка на скрипку работает только в браузерах webkit:
http://jsfiddle.net/Tu95Y/750/

@-webkit-keyframes slide {
    from{
        background:left;
    }
    to{
        background:right;
    }
}

#logo{
    width:300px;
    height:200px;
    background:url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg);
    -webkit-animation: slide 5s linear infinite;
}

Answer 1

С этим изображением вы не можете. CSS делает то, что должен (повторяется бесконечно), но само изображение не является непрерывным. Вам нужно изображение, последний кадр которого идентичен первому, поэтому, когда анимация заканчивается, оно выглядит так, как будто оно никогда не останавливается.

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

В любом случае, вот результат: http://jsfiddle.net/Tu95Y/751/

@-webkit-keyframes slide {
  from{
      background-position:1725px;
  }
  to{
      background-position:575px;
  }
}

#logo{
  width:575px;
  height:200px;
  background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
  -webkit-animation: slide 10s linear infinite;
}

Answer 2

Я думаю, что что-то вроде «поворота» с использованием большего изображения, чем вам нужно, может создать аналогичный эффект. См. эту страницу для объяснения и демонстрацию

это выиграноне строго слева / справа, так что это будет зависеть от вашего фактического изображения, если оно будет выглядеть хорошо

Answer 3

Нам понравилась идея одного и того же кадра в начале и в конце, но гораздо проще было просто дублировать его 2 раза и использовать более длинную анимацию.Это будет работать в течение 8 минут.

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

Тогда на вашем элементе:

animation: animatedBackground 480s linear;
-moz-animation: animatedBackground 480s linear;
-webkit-animation: animatedBackground 480s linear;
-ms-animation: animatedBackground 480s linear;
-o-animation: animatedBackground 480s linear;