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

background-position接受2个参数：

第一个水平定位
和第二个用于垂直定位

More info on background-position on W3schools

因此，通过向background-position属性添加第二个参数，您可以垂直动画背景。

我修改了您的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

您只是设置并设置其中一个背景位置值的动画，因此它假定引用第一个（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 */
}

Css3动画垂直

4 个答案: