J'ai essayé différentes façons d'utiliser des images clés d'animation. Je n'arrive pas à le faire. Je veux fondamentalement que mon arrière-plan soit animé de gauche à droite et répète, comme un chapiteau mais comme mon arrière-plan.Y a-t-il un moyen d'animer mon image d'arrière-plan pour avoir un effet de type défilement/défilement?
Il me semble que la seule solution pour moi est de faire un gif pour mes antécédents, mais c'est vraiment très long pour moi.
pour éviter des sauts dans l'animation (une fois reachs la fin et à nouveau début) I déplacerait l'image avec repeat-x à une quantité exagérée de x coordonne comme ceci:
html {
margin:0;padding:0; height:100%;
}
body {
height:100%;
background-image:url(https://i.imgur.com/aCDecXL.jpg);
background-size: auto 100%;
overflow:hidden;
background-repeat:repeat-x;
animation: scroll 700000s infinite linear;
}
@keyframes scroll {
from { background-position: 0%; }
to { background-position: 90000000%; }
}Essayez ceci.
#animate-area {
width: 560px;
height: 400px;
background-image: url('http://labs.designoptimizer.net/snip/bg-clouds.png');
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}<div id="animate-area"></div>Utilisez l'animation image-clé pour le faire fonctionner
.background{
background: url(https://dummyimage.com/1500x700/);
width: 560px;
\t height: 400px;
background-position: 0px 0px;
\t background-repeat: repeat-x;
background-size: cover;
animation: animation_back 2s linear infinite;
}
@keyframes animation_back {
\t from { background-position: 0 0; }
\t to { background-position: 200% 0; }
}<div class="background">
</div>
Merci maintenant <3 a beaucoup ,, cela fait beaucoup plus de sens – bitsnake