Transition multiple backgrounds

by stopsatgreen

HTML

<div></div>

CSS

div {
    background-image:
        url('http://placekitten.com/60/60'),
        url('http://placekitten.com/70/70'),
        url('http://placekitten.com/80/80');
    background-position: 25% 25%, 50% 50%, 75% 75%;
    background-repeat: no-repeat;
    border: 1px solid pink;
    height: 200px;
    transition: 2s;
    width: 100%;
}
div:hover {
    background-position: 100% 25%, 0 50%, 50% 75%;
}