@keyframes myfirst {
    from {
        background: red;
    }

    to {
        background: yellow;
    }
}

@keyframes myfirst {
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }

    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }

    50% {
        background: blue;
        left: 200px;
        top: 200px;
    }

    75% {
        background: green;
        left: 0px;
        top: 200px;
    }

    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}

@-moz-keyframes myfirst /* Firefox */
{
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }

    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }

    50% {
        background: blue;
        left: 200px;
        top: 200px;
    }

    75% {
        background: green;
        left: 0px;
        top: 200px;
    }

    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }

    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }

    50% {
        background: blue;
        left: 200px;
        top: 200px;
    }

    75% {
        background: green;
        left: 0px;
        top: 200px;
    }

    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}

@-o-keyframes myfirst /* Opera */
{
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }

    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }

    50% {
        background: blue;
        left: 200px;
        top: 200px;
    }

    75% {
        background: green;
        left: 0px;
        top: 200px;
    }

    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}