webkit für css3-animation-loop

Machte ich einen hintergrund animiert von Links nach rechts. Alles funktioniert gut, aber wenn hintergrund-Bild erreicht Recht, die animation beginnt wieder von vorn.

Wie kann ich es machen, um kontinuierlich laufen, so dass es scheint, ist das Reisen von Links nach rechts immer (keine Pausen)?

Hier ist der fiddle-link funktioniert nur in webkit-Browsern:

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;
}
InformationsquelleAutor SRN | 2011-06-09
  1. 18

    Mit diesem Bild, kann man nicht. Die CSS-tut was es soll (Periode unendlich), aber das Bild selbst ist nicht kontinuierlich. Was Sie brauchen, ist ein Bild, dessen Letzte Bild ist identisch mit der ersten, so dass, wenn die animation endet, scheint es, als ob es nie aufgehört.

    Diesen Effekt erreichen Sie, indem Sie eine extra-lange Bild und drehen Sie das Bild entlang Ihrer Achse, aber dieser Effekt funktioniert besser auf einige Bilder als andere. So etwas wie dieses:

    webkit für css3-animation-loop

    In jedem Fall, hier ist das Ergebnis: 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;
}
    • Dank jeff, wie hast du das Bild
    • Ich benutzt pixlr. Öffnen Sie es in ein Bild-editor, und Sie können sehen, was ich habe: die Größe des div ist 575, also brauche ich die erste 575px zu sein, identisch zu den letzten 575px. Also machte ich ein Bild, das war 1725, und in der 'Mitte' 575px habe ich eine Umgedrehte version des Bildes.
    • Wenn Sie entfernen das -webkit-Präfix, es funktioniert in Firefox zu.
    InformationsquelleAutor Jeff
  2. 1

    Ich denke, dass etwas entlang der Linien von "drehen" mit einem größeren Bild, als Sie brauchen könnten, sollten, erstellen einen Effekt ähnlich sehen.. diese Seite eine Erklärung und demo

    es wird nicht streng von Links/rechts, so dass es hängt über Ihrem eigentlichen Bild, wenn es in Ordnung aussieht,

    InformationsquelleAutor clairesuzy
  3. 0

    Haben wir wie die Idee, der gleiche Rahmen bei der begnning und Ende, aber es war viel einfacher, nur um Sie zu duplizieren 2 mal und Benutzer eine längere animation. Dieses wird für 8 Minuten. 

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

    Dann auf Ihrem element:

    animation: animatedBackground 480s linear;
-moz-animation: animatedBackground 480s linear;
-webkit-animation: animatedBackground 480s linear;
-ms-animation: animatedBackground 480s linear;
-o-animation: animatedBackground 480s linear;
    InformationsquelleAutor Kevin Parker
Schreibe einen Kommentar