J'essaie d'animer la position d'arrière-plan d'un div, lentement, mais sans qu'il ait un mouvement saccadé. Vous pouvez voir le résultat de mes efforts actuels ici:
@-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
J'y suis depuis des heures et je ne trouve rien qui s'anime lentement et en douceur à un niveau sous-pixel. Mon exemple actuel a été fait à partir de l'exemple de code sur cette page: http://css-tricks.com/parallax-background-css3/
La fluidité de l'animation que je recherche est visible sur l'exemple translate () de cette page:
http://css-tricks.com/tale-of-animation-performance/
Si cela ne peut pas être fait avec la position d'arrière-plan, existe-t-il un moyen de simuler l'arrière-plan répétitif avec plusieurs divs et de déplacer ces divs en utilisant translate?
Découvrez cet exemple:
<div id="content">Foreground content
<div class="bg"></div>
</div>
@-webkit-keyframes MOVE-BG {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(-187%);
}
}
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
L'animation de la position d'arrière-plan entraînera des problèmes de performances. Les navigateurs animeront les propriétés de transformation à moindre coût, y compris la traduction.
Voici un exemple d'utilisation de la traduction pour une animation de diapositive infinie (sans préfixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
@-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
Vous devez ajuster un peu votre code HTML et CSS
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
[~ # ~] css [~ # ~]
@-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}