我正在寻找在@keyframe中进行添加分配的方法。 例如,我希望背景位置改变无穷大,然后继续。
.waterwave{
background-image: url("../img/waterwave.png");
height: 215px;
margin-top: -78px;
width: 100%;
animation-name: example;
animation-duration: 100s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: normal;
}
@keyframes example {
to {background-position: 100px;}
}
但我不想像100px那样制造绝对值。 我想要一些像backgroundPosition:js动画中的“+ = 100”。 在CSS中有没有可能像那样做?
答案 0 :(得分:0)
如果您有重复背景,则位置从背景图形的宽度开始。例如,如果图形宽度为300px,则background-position:50px
看起来与background-position:350px
完全相同。
这就是你可以使用的:将背景动画移动到与图形完全相同的宽度,然后它将无缝地重新开始。至少如果你使用线性函数而不是轻松进入。
.waterwave {
background-image: url("http://lorempixel.com/300/215"); /* a 300px wide image */
height: 215px;
margin-top: -78px;
width: 100%;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear; /* changed from ease-in-out */
animation-iteration-count: infinite;
animation-direction: normal;
}
@keyframes example {
to {
background-position: 300px; /* this should be the same as the image */
}
}
<div class="waterwave"></div>
(在示例中,我使用了5秒的持续时间,以使效果可见,但你明白了。)