Блог

Главная - Вопросы по программированию - цикл анимации webkit css3

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

#animation #google-chrome #css #webkit

#Анимация #google-chrome #css #webkit

Вопрос:

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

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

Вот ссылка на скрипку, которая работает только в браузерах 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;
}

Ответ №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;
}

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

1. Я использовал pixlr. Откройте его в графическом редакторе, и вы можете увидеть, что я сделал: размер div равен 575, поэтому мне нужно, чтобы первые 575px были идентичны последним 575px. Итак, я создал изображение размером 1725, а в «середине» 575px я использовал перевернутую версию изображения.

2. Если вы удалите префикс -webkit, это работает и в Firefox .

Ответ №2:

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

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

Ответ №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;