webkit css3 animation en boucle

J'ai fait un fond pour animer de gauche à droite. Tout fonctionne bien mais quand background-image atteint droite, l'animation recommence de nouveau.

Comment puis-je faire pour fonctionner en permanence, de sorte qu'il apparaît, il se déplace de gauche à droite toujours (sans les pauses)?

Ici est le violon, le lien ne fonctionne que dans les navigateurs 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;
}

OriginalL'auteur SRN | 2011-06-09

  1. 18

    Avec cette image, vous ne pouvez pas. Le CSS est en train de faire ce qu'il est censé (à répéter à l'infini), mais l'image elle-même n'est pas continue. Ce que vous avez besoin est une image dont la dernière image est identique à la première, de sorte que lorsque l'animation se termine, il semble comme si il ne s'est jamais arrêté.

    Vous pouvez obtenir cet effet en faisant un extra-longue de l'image et de la rotation de l'image le long de son axe, mais que cet effet fonctionne mieux sur certaines images, que d'autres. Quelque chose comme ceci:

    webkit css3 animation en boucle

    En tout cas, voici le résultat: 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;
}
    merci jeff comment avez-vous fait cette image
    J'ai utilisé pixlr. L'ouvrir dans un éditeur d'image et vous pouvez voir ce que j'ai fait: la taille de la div est de 575, j'ai donc besoin de la première 575px être identique à la dernière 575px. J'ai donc fait une image qui a été 1725, et dans le "milieu" 575px j'ai utilisé une flippée de la version de l'image.
    Si vous supprimez le -webkit préfixe, cela fonctionne dans Firefox trop.

    OriginalL'auteur Jeff

  2. 1

    Je pense que quelque chose le long des lignes de "faire tourner" à l'aide d'une image plus grande que vous avez besoin peuvent être devrait créer un effet similaire.. voir cette page pour une explication et démonstration

    il ne sera pas strictement de gauche/droite de sorte qu'il dépendra de votre image si elle a l'air OK

    OriginalL'auteur clairesuzy

  3. 0

    Nous a bien aimé l'idée de la même image à la begnning et à la fin, mais c'était beaucoup plus facile de le dupliquer 2 fois et l'utilisateur a plus d'animation. Cela permettra de courir pendant 8 minutes. 

    @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; }
}

    Ensuite sur votre élément:

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

    OriginalL'auteur Kevin Parker