moving divs or table with CSS with two buttons

I need a wide div or table divided in three tds. The middle one is visible (which I achieved by putting it into another div with overflow:hidden and absolute positioning within relative positioning). The middle section also contains two buttons. What I need is when we click on the first one, the whole div or table should move right to reveal the left section. The other button should make the whole thing move right to reveal the left section.

I tried to make them labels of a checkbox and later add:

input#en:checked + div#bodywrapperfloat {
   animation: enslide 1s;
   animation-fill-mode: forwards;
}

but nothing moves (the checkbox checks though). The animation should make it move, but it doesn't. I think the reason might be that the labels are actually inside the moving div. Is this a problem? Can you suggest any other CSS solution?

In short, I need an element that moves left or right depending on the button clicked.

I'm adding some code I tried to use with the table:

#bodywrapperfixed {
width: 1440px;
margin: 0px auto;
position: relative;
overflow: hidden;
height: 730px;
}


#bodywrapperfloat {
width: 4320px;
border: none;
position: absolute;
top: 0px;
left: -1440px;
table-layout:fixed;
color: #000;
border: 1px solid #ff0000;
}

table#ramka {
width: 4320px;
border: none;
table-layout:fixed;
color: #000;
border: none;
}


table#ramka td{
width: 1440px;
border: none;
}

table#linki {
width: 110px;
border: none;
margin-top:15px;
}





label {
  display: block;
  height: 54px;
  width: 54px;
  color:#fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 35px;
  background-color: #117D10;
  text-align: center;
  padding:23px;

}

label:hover {
  background-color: #004F00;
  cursor: pointer;
}

input#pl {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

input#en {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

For animation:

@keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}

@-webkit-keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}

@-moz-keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}

@-ms-keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}

@-o-keyframes enslide
{
from {left:-1440px;}
to {left:0px;}
}


@keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}

@-webkit-keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}

@-moz-keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}

@-ms-keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}

@-o-keyframes plslide
{
from {left:-1440px;}
to {left:-2880px;}
}


input#en:checked + div#bodywrapperfloat {


     animation: enslide 1s;
     animation-fill-mode: forwards;

     -webkit-animation: enslide 1s;
     -webkit-animation-fill-mode: forwards;

     -moz-animation: enslide 1s; 
     -moz-animation-fill-mode: forwards;

     -ms-animation: enslide 1s; 
     -ms-animation-fill-mode: forwards;

     -o-animation: enslide 1s; 
     -o-animation-fill-mode: forwards;

}

HTML:

<div id="bodywrapperfixed">
<div id="bodywrapperfloat">
<table id="ramka">
     <tr>
          <td>left td</td>
          <td>center td

<table id="linki">
<tr>
<td><label for="en">en</label><input id="en" type="checkbox"></td>
<td><label for="pl">pl</label><input id="pl" type="checkbox"></td>
</tr></table>
</center>
</div></td>
          <td>right td</td>
     </tr>
</table>
</div></div>