Css3 animation vertical

Question

i want to use this code , but i want animation goes 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 */
}

i found this code here : http://jsfiddle.net/e3WLD/3/

thanks for help

Answer 1

The background-position accepts 2 parameters :

• the first one for horizontal positioning
• and the second one for vertical positioning

More info on background-position on W3schools

So by adding a second parameter to the background-position property you can animate your background vertically.

I edited your JSFiddle

To this:

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 */
}

Answer 2

I am able to do vertical by transforming the element 90 degrees.

transform: rotate(90deg);
-webkit-transform: rotate(90deg);

Working Fiddle

Answer 3

You are only setting and animating one of the background position values so it assumes that are referreing to the first one (x-position) and the other defaults to auto (I think).

Try this

**JSFiddle Demo**

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

Answer 4

If you want to set it to vertically rotate like this: http://jsfiddle.net/jme11/AYKC2/

Then you need to set the repeat to repeat-y and change the background position to match the element's height:

@keyframes myanim {
  0%   { background-position: 0px 0px; }
  100% { background-position: 0px 131px; } /* set this to the height of the image */
}