css3 - una - transiciones css ejemplos

Animar la posición del fondo CSS con resultados suaves(animación de subpíxeles)

Question

Estoy tratando de animar la posición de fondo de un div, lentamente, pero sin que tenga movimientos bruscos. Puedes ver el resultado de mis esfuerzos actuales aquí:

http://jsfiddle.net/5pVr4/2/

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

He estado en esto durante horas y no puedo encontrar nada que se anime lenta y suavemente a un nivel de sub-píxel. Mi ejemplo actual se hizo a partir del código de ejemplo en esta página: http://css-tricks.com/parallax-background-css3/

La suavidad de la animación que busco se puede ver en el ejemplo de traducir () de esta página:

http://css-tricks.com/tale-of-animation-performance/

Si no se puede hacer con la posición de fondo, ¿hay una manera de falsificar el fondo de repetición con múltiples divs y mover esos divs usando traducir?

Answer 1

Debe ajustar su HTML y CSS poco

Demo de trabajo

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

Answer 2

Echa un vistazo a este ejemplo:

http://jsfiddle.net/5pVr4/4/

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

Answer 3

La animación de la posición de fondo causará algunos problemas de rendimiento. Los navegadores animarán las propiedades de transformación a un precio muy bajo, incluido el de traducción.

Aquí hay un ejemplo que usa translate para una animación de diapositivas infinitas (sin prefijos):

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