CSS Table Colum Animation With Marquee

Pada tutorial CSS kali ini kita akan membuat sebuah trik CSS sederhana untuk membuat animasi pada kolom tabel dengan menggunakan marquee. Jadi nanti kolom pada table akan berjalan dari bawah keatas secara berulang ulang. Untuk membuat animasi seperti ini kita hanya memerlukan sebuah html dan css saja, tidak perlu menggunakan Javacript.

Baik berikut contoh animasi kolom tabel menggunakan CSS maquee.

<table id="myTable" width="100%">
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
      <th scope="col">Header 5</th>
    </tr>
  </thead>
  <tbody class="marquee">
    <tr>
      <td>Row1 - Column 1</td>
      <td>Row1 - Column 2</td>
      <td>Row1 - Column 3</td>
      <td>Row1 - Column 4</td>
      <td>Row1 - Column 5</td>
    </tr>
    <tr>
      <td>Row2 - Column 1</td>
      <td>Row2 - Column 2</td>
      <td>Row2 - Column 3</td>
      <td>Row2 - Column 4</td>
      <td>Row2 - Column 5</td>
    </tr>
    <tr>
      <td>Row3 - Column 1</td>
      <td>Row3 - Column 2</td>
      <td>Row3 - Column 3</td>
      <td>Row3 - Column 4</td>
      <td>Row3 - Column 5</td>
    </tr>
    <tr>
      <td>Row4 - Column 1</td>
      <td>Row4 - Column 2</td>
      <td>Row4 - Column 3</td>
      <td>Row4 - Column 4</td>
      <td>Row4 - Column 5</td>
    </tr>
    <tr>
      <td>Row5 - Column 1</td>
      <td>Row5 - Column 2</td>
      <td>Row5 - Column 3</td>
      <td>Row5 - Column 4</td>
      <td>Row5 - Column 5</td>
    </tr>
    <tr>
      <td>Row6 - Column 1</td>
      <td>Row6 - Column 2</td>
      <td>Row6 - Column 3</td>
      <td>Row6 - Column 4</td>
      <td>Row6 - Column 5</td>
    </tr>
    <tr>
      <td>Row7 - Column 1</td>
      <td>Row7 - Column 2</td>
      <td>Row7 - Column 3</td>
      <td>Row7 - Column 4</td>
      <td>Row7 - Column 5</td>
    </tr>
    <tr>
      <td>Row8 - Column 1</td>
      <td>Row8 - Column 2</td>
      <td>Row8 - Column 3</td>
      <td>Row8 - Column 4</td>
      <td>Row8 - Column 5</td>
    </tr>
    <tr>
      <td>Row9 - Column 1</td>
      <td>Row9 - Column 2</td>
      <td>Row9 - Column 3</td>
      <td>Row9 - Column 4</td>
      <td>Row9 - Column 5</td>
    </tr>
    <tr>
      <td>Row10 - Column 1</td>
      <td>Row10 - Column 2</td>
      <td>Row10 - Column 3</td>
      <td>Row10 - Column 4</td>
      <td>Row10 - Column 5</td>
    </tr>
  </tbody>
</table>

th, thead {
  position: relative;
  z-index: 2;
  background-color: white;
}

.marquee {
    top: 1em;
    position: relative;
    box-sizing: border-box;
    margin-top : 500px; 
    animation: marquee 10s linear 0s infinite;
}
.marquee:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -100%);
    }
}

Untuk kecepatan animasi kalian bisa ubah pada bagian animation: marquee 10s . Ganti dengan jumlah detik yang kalian inginkan. Anda juga bisa melihat live demo kami di JsFiddle disini.