Animation Direction

HTML

<div id="container">
    <div class="one">Normal</div>
    <div class="two">Alternate</div>
    <div class="tre">Reverse</div>
    <div class="for">Alt. Reverse</div>
</div>

CSS

@-webkit-keyframes OneD {
    to { -webkit-transform: translate(400%); }
}
@keyframes OneD {
    to { transform: translate(400%); }
}
#container {
    border: 1px solid;
    height: 300px;
    width: 100%;
}
#container div {
    -webkit-animation: OneD 4s 1;
    animation: OneD 4s 1;
    background-color: red;
    color: white;
    font: bold 1em/75px sans-serif;
    height: 75px;
    text-align: center;
    width: 20%;
    animation-iteration-count: 1;
    
     animation-fill-mode: forwards;
    
}
#container .two {
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background-color: blue;
}
#container .tre {
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
    background-color: green;
}
#container .for {
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
    background-color: cyan;
}