webkit css3-Animationsschleife
Ich habe einen Hintergrund erstellt, um von links nach rechts zu animieren. Alles funktioniert gut, aber wenn das Hintergrundbild richtig ist, beginnt die Animation von vorne.
Wie kann ich es so einrichten, dass es kontinuierlich läuft, so dass es immer von links nach rechts läuft (keine Pausen)?
Hier funktioniert der Fiddle-Link nur in Webkit-Browsern:
Ссылка
3 Antworten
Mit diesem Bild können Sie nicht. Das CSS tut, was es soll (unendlich wiederholend), aber das Bild selbst ist nicht kontinuierlich. Was Sie brauchen, ist ein Bild, dessen letzter Rahmen identisch mit dem ersten ist, so dass, wenn die Animation endet, es scheint, als ob es nie aufgehört hat.
Sie können diesen Effekt erzielen, indem Sie ein überlanges Bild erstellen und das Bild entlang seiner Achse drehen. Dieser Effekt funktioniert jedoch bei manchen Bildern besser als bei anderen. Etwas wie das:
In jedem Fall ist hier das Ergebnis: Ссылка
%Vor%Ich denke, etwas in der Art von "rotieren" mit einem größeren Bild, als Sie benötigen, sollte einen ähnlichen Effekt erzeugen .. Siehe diese Seite für eine Erklärung und Demo
es wird nicht streng von links / rechts sein, es hängt also von Ihrem tatsächlichen Bild ab, wenn es OK aussieht
Uns gefiel die Idee des gleichen Frames am Anfang und am Ende, aber es war viel einfacher, es nur zweimal zu kopieren und eine längere Animation zu verwenden. Dies wird für 8 Minuten ausgeführt.
%Vor%Dann auf dein Element:
%Vor%Tags und Links css animation google-chrome css3 webkit