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

I've been trying to make a infinite seamless vertical scrolling line but fails with the restart of the animation that makes the whole page blink. Any clues where to go next?

This is made from trying examples and rewriting them but I am out of options.

Here's how far I've gotten yet: http://galle.ri-ga.se/ll/

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 >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon  points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

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

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

CodePudding user response：

Is this How you want it to look like ?

*{
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 >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 337.34">
<style>.a{fill:#eb008b;}</style>
<polygon  points="375 0 0 197.34 0 337.34 375 140 375 0"/></svg>
  </div>

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

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