如何制作流畅无缝的无限HTML/CSS动画？

Question

我一直在尝试制作一条无限无缝的垂直滚动线，但由于重新启动使整个页面闪烁的动画而失败。有什么下一步要去哪里的线索吗？

这是通过尝试示例并重写它们而完成的，但我别无选择。

body {
  margin: 0;
  padding: 0;
  background-color: #39B54A;
}

h1 {
  background-color: #ff0;
  width: 40%;
  border-radius: 1px 25px 20px 1px;
  text-align: center;
  z-index: 2;
  font-family: Courier;
}

h6 {
  background-color: #ff0;
  width: 30%;
  border-radius: 1px 25px 20px 1px;
  text-align: center;
  z-index: 2;
  font-family: Courier;
}

logo-slider {
  border: 0px;
  width: 100%;
  z-index: -1;
}

logo-slider div {
  position: relative;
  animation: marquee 5s linear infinite;
  z-index: -1;
}

logo-slider svg {
  display: block;
  z-index: -1;
}

@keyframes marquee {
  0% {
    transform: translateY(-100%);
    z-index: -1;
  }
  100% {
    transform: translateY(0%);
    z-index: -1;
  }
}

<h1> galleri gasell &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;( ͡° ᴥ͡°)</h1><br>
<h6>coming soon</h6>
<logo-slider>
  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>
</logo-slider>

Answer 1

这是你想要的样子吗？

*{
margin: 0;
  padding: 0;
  box-sizing:border-box;
}
body {
  margin: 0;
  padding: 0;
  background-color: #39B54A;
}

h1 {
  background-color: #ff0;
  width: 40%;
  border-radius: 1px 25px 20px 1px;
  text-align: center;
  z-index: 2;
  font-family: Courier;
}

h6 {
  background-color: #ff0;
  width: 30%;
  border-radius: 1px 25px 20px 1px;
  text-align: center;
  z-index: 2;
  font-family: Courier;
}

logo-slider {
  border: 0px;
  width: 100%;
  z-index: -1;
}

logo-slider div {
  position: relative;
  animation: marquee 5s linear infinite;
  z-index: -1;
  
  width:100%;
   transform: rotate(105deg);
}

logo-slider svg {
  display: block;
  z-index: -1;
}

@keyframes marquee {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  
  }
}

<h1> galleri gasell &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;( ͡° ᴥ͡°)</h1><br>
<h6>coming soon</h6>
<logo-slider>
  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

  <div class="hej2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon class="a" points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>
</logo-slider>

如何制作流畅无缝的无限HTML/CSS动画？

How to make a smooth seamless infinite HTML/CSS animation?

html

css

animation

svg