Question

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

Answer 1

如果您有重复背景，则位置从背景图形的宽度开始。例如，如果图形宽度为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秒的持续时间，以使效果可见，但你明白了。）

css3动画添加作业{}

1 个答案: