JSFiddle - React, Tailwind, and code Playground

css3 rock back and forth animation

by Andrew Pougher

HTML

<div class="animated"></div>

CSS

.animated {
     width: 500px;
    height: 100px;
    background: #eee;
    animation-name: rockme;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes rockme {
    0% {
        transform:translate3d(50px, 0, 0);
    }
    50% {
        transform:translate3d(0, 0, 0);
    }
    100% {
        transform:translate3d(50px, 0, 0);
    }
}