Question

我希望创建一个水平行驶的无限（重复）动画，并通过景观（不同的图层，SVG）。

我无法找到如何沿着X轴重复我的SVG风景图层，因此当我播放动画时，它会不断重复。

我的动画是使用CSS关键帧和translateX完成的（不确定它是否是最好的解决方案）。

Answer 1

这里的想法是你希望“模仿”背景重复。我不确定这是最好的解决方案，它只是我过去使用的一种，非常喜欢。

首先，我们将使用相同的属性复制背景svg并将其命名为@each $color in $colors { $key: nth($color, 1); $value: nth($color, 2); // How can I dynamiclly generate a varibale here, // it can be used outside this each scope // Color .#{$key} { color: $value; } // Background color .bg-#{$key} { background-color: $value; } } // using the variable .some-component { // I need genreate this $mid-gray variable dynamiclly in the each loop color: $mid-gray; }而不是#back。

#front

接下来，我们设置另一个具有完全相同属性的动画，但它从keyframes frontScroll { from {transform: translateX(0);} to {transform: translateX(100%);} } keyframes backScroll { from {transform: translateX(-100%);} to {transform: translateX(0%);} }移动到-100%，而原始动画从0% 100％`。

如果我们将它们包装在一起，会发生以下情况：

0% to

body {
  margin : 0;
  overflow : hidden;
}
#front {
  position : absolute;
  left :0;
  right:0;
  bottom:0;
  z-index : 9;
  -webkit-animation: frontScroll 2.5s linear infinite;
 animation: frontScroll 2.5s linear infinite;
}

#back {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9
  -webkit-animation: backScroll 2.5s linear infinite;
  animation: backScroll 2.5s linear infinite;
}

keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}

@-webkit-keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}

keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}

@-webkit-keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}

现在，我们可以轻松地将汽车或其他物品放置在陆地上，而这是一辆永无止境的驾驶汽车。

无限地水平重复SVG

1 个答案: