.left-arrow{
    position: relative;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
}

.left-arrow::before{
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 10px #5bc0de;
    border-right: solid 10px #5bc0de;
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -10px;
}

.right-arrow{
    position: relative;
    display: inline-block;
    padding-left: 25px;
}

.right-arrow::before{
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 10px #5bc0de;
    border-right: solid 10px #5bc0de;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -10px;
}

.main,.items {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    overflow: hidden;
}
.main {
    width: 300px;
    margin: auto;
}
.items {
    width: 250px;
}

.item {
  width: 70px;
  background-color: blue;
  color: white;
  padding: 10px;
}

.item:not(:first-child) {
    margin-left: 20px;
}

.hidden {
    display: none;
}

#button1-forward:checked ~ .items .item {
    animation: forward-anim 1s forwards;
}
#button1-backword:checked ~ .items .item {
    animation: backword-anim 1s forwards;
}

@keyframes forward-anim {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-250px);
    }
}
@keyframes backword-anim {
    0% {
        transform: translateX(-250px);
    }
    100% {
        transform: translateX(0);
    }
}