0

I'm looking for a solution to add a non-JS CSS3 animation for a specific project.

This animation should auto-start, scroll (horizontally) every 10s to the next page.

<table style="width:100%">
  <tr>
    <th>First</th>
    <th>Second</th> 
    <th>Third</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td> 
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td> 
    <td>F</td>
  </tr>
</table>

Let's assume we got three pages with this content. What would be an appropriate solution to my problem?

Tunnelblick
  • 137
  • 2
  • 11
  • 1
    you can't scroll with css alone – Pete Nov 28 '18 at 15:30
  • https://codepen.io/davidicus/pen/pvObpV?editors=1100#0 http://jsfiddle.net/hf4gap4v/ Sure it does work ... – Tunnelblick Nov 28 '18 at 15:48
  • Yep, that's with an interaction, you're wanting it to do it automatically, which can't be done without js. Also, that's not scrolling – Pete Nov 28 '18 at 15:48
  • https://stackoverflow.com/questions/15485694/auto-scrolling-with-css Again: it does work using CSS3 animations. – Tunnelblick Nov 28 '18 at 15:50
  • Again - see any scrolling there - it is transitioning the margin. Anyway, your question is too broad and therefore off topic for SO. Why not have a go at one of these links you provide and if you get stuck with a particular implementation, come back and ask a more specific question – Pete Nov 28 '18 at 15:50
  • So you are not having 3 pages but 3 sections with content in one page. `divs` ? you do not have any. And if you have found so many examples with code that works only with CSS why don't you try it ? – Mihai T Nov 28 '18 at 15:52
  • @MihaiT I've already tried different solutions without success. I also found one similar solution but this implementation wasn't responsive ... Well, that's the content of these divs. I thought it would be sensless to copy this three times surrounding a div each time – Tunnelblick Nov 28 '18 at 15:55
  • You should post here what you have tried. regardless the outcome – Mihai T Nov 28 '18 at 16:00

1 Answers1

1

You can use margin-left to scroll. But for that I believe you might need to change your html.

See the Snippet below:

.page-container{
  animation: scroll 8s 2s infinite linear forwards;
  width:2000px;
}

.page {
  width:650px;
  height:200px;
  color:white;
  font-family:calibri;
  text-align:center;
  vertical-align:middle;
  line-height:60px;
  display:inline-block;
}
.one{
  background: #3A4662;
}

.two{
  background: #00827F;
}

.three{
  background: #580137;
}


@-webkit-keyframes scroll {
  10% {
    margin-left: 0px;
  }
  35%{
    margin-left: -650px;
  }
  50%{
    margin-left: -650px;
  }
  75%{
    margin-left: -1300px;
  }
  90%{
    margin-left: -1300px;
  }
  95%{
    margin-left:0px;
  }
  100% {
    margin-left: 0px;
  }
}
<div class="page-container">
  <div class="page one">
    <div>First</div>
    <div>A</div>
    <div>D</div>
  </div>
  <div class="page two">
    <div>Second</div> 
    <div>B</div> 
    <div>E</div> 
  </div>
  <div class="page three">
    <div>Third</div>
    <div>C</div>
    <div>F</div>
  </div>
</div>

You can also test it here

Nimitt Shah
  • 4,477
  • 2
  • 10
  • 21