web-dev-qa-db-fra.com

CSS background-position animate de droite à gauche

J'essaie d'animer une image d'arrière-plan, de sorte que l'image apparaisse de droite à gauche ... J'ai utilisé une image de plus grande largeur que le conteneur div, où se trouve l'arrière-plan. Au début, le backgrond est le suivant

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

mais lorsque la page est chargée, je veux que l’arrière-plan soit animé, de sorte qu’il soit positionné à gauche. Cela devrait prendre un exemple. 2 secondes et seulement devrait être fait une fois. (l'image doit être positionnée à gauche après).

Je ne veux pas utiliser d'événements de souris ou de pseudo-classes. Est-il possible de l'animer en utilisant uniquement du CSS? J'ai essayé de trouver une solution avec des images clés sans succès.

jqueryhtmlcssbackground-imagebackground-position
9
Maexwell

Vous pouvez essayer d'utiliser this tutorial: CSS Animation en arrière-plan

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

Exemple ici: http://jsfiddle.net/verber/6rAGT/5/

J'espère que ce dont vous avez besoin)

20
Andrii Verbytskyi

lien de travail: http://sagiavinash.com/labs/tests/css_anim/

C'est un truc peu orthodoxe.

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

ce qui se passe ici est initialement le css mentionné dans le <style> est rendu . plus tard puisque la feuille de style externe se trouve dans le corps juste avant le </body>. il y a donc un décalage dans la mise en œuvre du fichier CSS qui nous permet d'appliquer une transition CSS.

AUCUN JAVASCRIPT, AUCUN ÉVÉNEMENT, nous obtenons toujours ce que nous voulons!

1
Sagi_Avinash_Varma

vous devez utiliser une animation et des nombres comme valeur afin de pouvoir calculer chaque position entre début et fin . fondamentalement ce serait:

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 */
}

D&EACUTE;MO

pour lancer une animation en charge, vous pouvez ajouter une classe au code HTML via javascript: 

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

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

}

et css se révèle être: 

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