CSS3 Animazione verticale
Domanda
Voglio usare questo codice, ma voglio che l'animazione diventa verticale.
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 */
}
.
Ho trovato questo codice qui: http://jsfiddle.net/e3wld/3/ .
Soluzione
La posizione di sfondo accetta 2 parametri:
- .
- il primo per il posizionamento orizzontale
- e il secondo per il posizionamento verticale
Ulteriori informazioni su sfondo-posizione su w3schools
A questo:
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 */
}
. Altri suggerimenti
Sono in grado di fare verticale trasformando l'elemento 90 gradi.
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
.
Si sta solo impostando e animando uno dei valori di posizione di sfondo in modo che si presuppone che si rivolga al primo (posizione X) e l'altro predefinito su AUTO (penso).
Prova questo
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; }
}
. Se si desidera impostarlo su verticalmente ruotare in questo modo: http://jsfiddle.net/jme11/aykc2/
Quindi è necessario impostare la ripetizione su repeat-y
e modificare la posizione di sfondo per abbinare l'altezza dell'elemento:
@keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 131px; } /* set this to the height of the image */
}
.