Animação CSS3 vertical
Pergunta
quero usar esse código, mas quero que a animação fique 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 */
}
encontrei este código aqui: http://jsfiddle.net/e3WLD/3/
obrigado pela ajuda
Solução
A posição de fundo aceita 2 parâmetros:
- o primeiro para posicionamento horizontal
- e o segundo para posicionamento vertical
Mais informações sobre a posição de fundo no W3schools
Portanto, adicionando um segundo parâmetro à propriedade de posição de fundo, você pode animar seu plano de fundo verticalmente.
Eu editei o seu JSFiddle
Para isso:
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 */
}
Outras dicas
Consigo fazer vertical transformando o elemento em 90 graus.
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
Você está apenas definindo e animando um dos valores de posição de fundo, então ele assume que está se referindo ao primeiro (posição x) e o outro é padronizado como automático (eu acho).
Experimente isso
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 você quiser configurá-lo para girar verticalmente assim: http://jsfiddle.net/jme11/AYKC2/
Então você precisa definir a repetição para repeat-y
e altere a posição do plano de fundo para corresponder à altura do elemento:
@keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 131px; } /* set this to the height of the image */
}