Css3动画垂直

Question

我想使用此代码，但我想要动画垂直。

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

，我发现这个代码在这里：http://jsfiddle.net/e3WLD/3/

感谢您的帮助

Answer 1

背景位置接受2个参数：

• 第一个为水平定位
• ，第二个用于垂直定位

More info on background-position on W3schools

因此通过添加第二个参数的背景位置属性，您可以 垂直动画的背景。

我编辑您的JSFiddle

要这样：

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

我能够通过转换元件90度做垂直。

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

Working Fiddle

Answer 3

你只设置和动画背景位置值中的一个，它假设是referreing到第一个（x位置），而另一默认为自动（我认为）。

尝试此

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

如果你想将其设置为垂直旋转这样的：http://jsfiddle.net/jme11/AYKC2/

然后，你需要重复设置为repeat-y和变化背景位置以匹配元素的高度：

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