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