Animación CSS3 vertical
Pregunta
Quiero usar este código, pero quiero que la animación se vuelva vertical.
header {
width: 100%;
height: 150px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
background-position: 0px;
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
@-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
@-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
@-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
@keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
Encontré este código aquí: http://jsfiddle.net/e3wld/3/
Gracias por la ayuda
Solución
La posición de fondo acepta 2 parámetros:
- el primero para el posicionamiento horizontal
- y el segundo para posicionamiento vertical
Más información sobre la posición de fondo en w3schools
Entonces, agregando un segundo parámetro a la propiedad de la posición de fondo que puede Animar tu fondo verticalmente.
Edité su jsfiddle
a esto:
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px;
background-repeat: repeat-y;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
@-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
@-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
@-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 1000px; } /* set this to the width of the image */
}
@keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
Otros consejos
Soy capaz de hacer vertical transformando el elemento 90 grados.
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
Solo está configurando y animando uno de los valores de la posición de fondo, por lo que asume que se referen a la primera (posición X) y los otros valores predeterminados para automáticamente (creo).
Prueba esto
css
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px; /* note */
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
@-webkit-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 1000px; }
}
@-moz-keyframes myanim
{ 0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
@-o-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
@keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
Si desea configurarlo para girar verticalmente así: http://jsfiddle.net/jme11/aykc2/
Luego, debe configurar la repetición en repeat-y
y cambiar la posición de fondo para que coincida con la altura del elemento:
@keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 131px; } /* set this to the height of the image */
}