css3动画添加作业{}

时间:2017-01-03 11:29:48

标签: css animation

我正在寻找在@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中有没有可能像那样做?

1 个答案:

答案 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秒的持续时间,以使效果可见,但你明白了。)