CSS3 анимация вертикаль
Вопрос
Я хочу использовать этот код, но я хочу анимацию идет вертикально.
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/ .
Спасибо за помощь
Решение
Фоновая позиция принимает 2 параметра:
- .
- первый для горизонтального позиционирования
- и второй для вертикального позиционирования
Подробнее на фоновой позиции на 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 */
}
. Другие советы
Я могу сделать вертикали, превращая элемент на 90 градусов.
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
.
Вы устанавливаете только и анимируете одну из значений фона, поэтому предполагается, что это предполагает, что представляется первой (X-Position), а также другие значения по умолчанию для AUTO (я думаю, что).
попробуйте это
<Сильные> 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; }
}
. Если вы хотите установить его вертикально вращать, как это: 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 */
}
.