wake-up-neo.com

CSS-Hintergrundposition animiert von rechts nach links

Ich versuche, ein Hintergrundbild so zu animieren, dass das Bild von rechts nach links erscheint. Ich habe ein Bild verwendet, das eine größere Breite als der div-Container hat, in dem sich der Hintergrund befindet. Beim Start ist der Hintergrund der folgende

background: url(../img/zeppelin.png);
background-repeat: no-repeat;
background-position: right;

wenn die Seite jedoch geladen ist, möchte ich, dass der Hintergrund animiert wird, sodass er links positioniert ist. Dies sollte ein zB dauern. 2 Sekunden und sollte nur einmal ausgeführt werden. (Das Bild sollte danach links liegen).

Ich möchte keine Mausereignisse oder Pseudoklassen verwenden. Gibt es eine Möglichkeit, es nur mit CSS zu animieren? Ich habe versucht, eine Lösung mit Keyframes ohne Erfolg zu finden.

9
Maexwell

Versuchen Sie es mit this tutorial: CSS Background Animation

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

html { 
    width: 100%; 
    height: 100%; 
    background-image: url(background.png);
    background-position: 0px 0px;

    animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    -webkit-animation: animatedBackground 10s linear infinite;
    -ms-animation: animatedBackground 10s linear infinite;
    -o-animation: animatedBackground 10s linear infinite;
}

Beispiel hier : http://jsfiddle.net/verber/6rAGT/5/

Hoffe es das was du brauchst)

20

arbeitslink: http://sagiavinash.com/labs/tests/css_anim/

Dies ist ein unorthodoxer Trick.

<html>
<head>
<style>
    .img{
      width:1000px;
      height:500px;
      background:url(1.jpg) no-repeat left;
      transition:background-position 1s;
      -ms-transition:background-position 1s;
      -moz-transition:background-position 1s;
      -o-transition:background-position 1s;
      -webkit-transition:background-position 1s;    
      }
</style>
</head>
<body>
    <div class="img"></div>
    <link rel="stylesheet" type="text/css" href="style.css">
</body>
</html>

style.css:

img{
  background-position:right;

was hier passiert, ist zunächst die im <style> erwähnte css-Datei. wird später gerendert, da sich das externe Stylesheet kurz vor </body>. im Body befindet. Nach dem Laden der Ressourcen in style_css wird also style.css geladen . Es gibt also eine Verzögerung bei der Implementierung des CSS, wodurch wir einen CSS-Übergang anwenden können.

KEIN JAVASCRIPT, KEINE EREIGNISSE noch bekommen wir was wir wollen!

1

sie müssen Animationen und Zahlen für den Wert verwenden, damit jede Position zwischen Anfang und Ende berechnet werden kann. Grundsätzlich wäre es:

html {
  background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
  background-size:10%;/* demo purpose */
  background-position: 100% 0;
  animation: bgmve 2s;
}
@keyframes bgmve {
  to {background-position: 0 0;} /* make it short */
}

DEMO


um eine Animation beim Laden auszulösen, können Sie eine HTML-Klasse über Javascript hinzufügen:

    onload=function() {
      var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

    root.setAttribute( "class", "move" );

}

und css wird zu:

html {
  background:url(http://gravatar.com/avatar/21ffdef6c07de75379e31a0da98d9543?s=512) no-repeat;
  background-size:10%;
  background-position: 100% 0;
}
.move {
  animation: bgmve 2s;
}
@keyframes bgmve {
  to {background-position: 0 0;
  }
}
0
G-Cyr