css - 2つのボタンを持つCSSでdivまたはテーブルを移動する

Question

td3 つの sに分割された幅の広い div またはテーブルが必要です。中央のものが表示されます（これは、相対位置内で絶対位置を指定して別の位置に配置することで実現しました）div。overflow:hidden中央のセクションにも 2 つのボタンがあります。私が必要とするのは、最初のものをクリックすると、div またはテーブル全体が右に移動して、左側のセクションが表示されることです。もう 1 つのボタンを押すと、全体が右に移動し、左側のセクションが表示されます。

チェックボックスのラベルを作成して、後で追加しようとしました：

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

しかし、何も動きません（ただし、チェックボックスはチェックされます）。アニメーションで動くはずなのに動かない。その理由は、ラベルが実際に移動する div 内にあるためだと思います。これは問題ですか？他の CSS ソリューションを提案できますか?

つまり、クリックされたボタンに応じて左右に移動する要素が必要です。

テーブルで使用しようとしたコードをいくつか追加しています。

#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;
}

アニメーションの場合:

@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>