CSS Animations Alternate / Reverse

by stopsatgreen

HTML

<div id="one"></div>
<div id="two"></div>

CSS

@-webkit-keyframes chimp {
    to {
        background-color: red;
        width: 100px;
    }
    from {
        background-color: yellow;
        width: 200px;
    }
}
@-webkit-keyframes gorilla {
    from {
        background-color: red;
        width: 100px;
    }
    to {
        background-color: yellow;
        width: 200px;
    }
}
@keyframes chimp {
    to {
        background-color: red;
        width: 100px;
    }
    from {
        background-color: yellow;
        width: 200px;
    }
}
@keyframes gorilla {
    from {
        background-color: red;
        width: 100px;
    }
    to {
        background-color: yellow;
        width: 200px;
    }
}

div {
    background-color: blue;
    border: 1px solid blue;
    height: 100px;
    width: 50px;
}

#one {
    -webkit-animation: chimp 2s infinite ease-in alternate-reverse;
    animation: chimp 2s infinite ease-in alternate-reverse;
}
#two {
    -webkit-animation: gorilla 2s infinite ease-in alternate;
    animation: gorilla 2s infinite ease-in alternate;
}