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//3/A> / P>

도움말

Answer 1

배경 위치는 2 개의 매개 변수를 허용합니다 :

• 수평 위치
의 첫 번째 첫 번째
• 및 세로 위치 결정을위한 두 번째 하나

W3Schools의 배경 위치에 대한 자세한 정보

백그라운드 위치 속성에 두 번째 매개 변수를 추가하여 수직으로 배경을 움직입니다.

i 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);

.

작업 바이올린

Answer 3

백그라운드 위치 값 중 하나를 설정하고 애니메이션하므로 첫 번째 하나 (x 위치)로 가르치고 다른 기본값은 자동 (i 생각)을 가정합니다.

이

를 사용해보십시오

** JSFiddle 데모 **

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

.