img {
    width: 100px;
    height: 100px;
}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 2; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0% {
        background-color: red;
        left: 0px;
        top: 0px;
    }
    25% {
        background-color: yellow;
        left: 200px;
        top: 0px;
    }
    50% {
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75% {
        background-color: green;
        left: 0px;
        top: 200px;
    }
    100% {
        background-color: red;
        left: 0px;
        top: 0px;
    }
}

/* Standard syntax */
@keyframes example {
    0% {
        background-color: red;
        left: 0px;
        top: 0px;
    }
    25% {
        background-color: yellow;
        left: 200px;
        top: 0px;
    }
    50% {
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75% {
        background-color: green;
        left: 0px;
        top: 200px;
    }
    100% {
        background-color: red;
        left: 0px;
        top: 0px;
    }
}