baoshi-was/resources/sass/animation.css

.animation-translation{
    animation:move 500ms infinite;
    -moz-animation:move 500ms infinite; /* Firefox */
    -webkit-animation:move 500ms infinite; /* Safari and Chrome */
    -o-animation:move 500ms infinite;/* Opera */
}

@keyframes move
{
    from {top:0;}
    to {top:-50px;}
}

@-moz-keyframes move /* Firefox */
{
    from {top:0;}
    to {top:-50px;}
}

@-webkit-keyframes move /* Safari and Chrome */
{
    from {top:0;}
    to {top:-50px;}
}

@-o-keyframes move /* Opera */
{
    from {top:0;}
    to {top:-50px;}
}

.translationRtoL{
    animation:moveRtoL 500ms 1;
    -moz-animation:moveRtoL 500ms 1; /* Firefox */
    -webkit-animation:moveRtoL 500ms 1; /* Safari and Chrome */
    -o-animation:moveRtoL 500ms 1;/* Opera */
}
@keyframes moveRtoL { from {left:0;} to {left:-50px;} }
@-moz-keyframes moveRtoL { from {left:0;} to {left:-50px;} }
@-webkit-keyframes moveRtoL { from {left:0;} to {left:-50px;} }
@-o-keyframes moveRtoL { from {left:0;} to {left:-50px;} }

.translationLtoR{
    animation:moveLtoR 500ms 1;
    -moz-animation:moveLtoR 500ms 1; /* Firefox */
    -webkit-animation:moveLtoR 500ms 1; /* Safari and Chrome */
    -o-animation:moveLtoR 500ms 1;/* Opera */
}
@keyframes moveLtoR { from {right:0;} to {right:-50px;} }
@-moz-keyframes moveLtoR { from {right:0;} to {right:-50px;} }
@-webkit-keyframes moveLtoR { from {right:0;} to {right:-50px;} }
@-o-keyframes moveLtoR { from {right:0;} to {right:-50px;} }