Transition background

Например, изображение меняются при наведении на него курсора мыши (:hover).

<a class="button" href="#"></a>

.button {
    display: inline-block;
    height: 129px;
    width: 129px;
    background: url(/demo/transition.png) 0 0 no-repeat;
    transition: background 0.2s ease;
}

.button:hover {
    background-image: url(/demo/transition-active.png);
}

Transition background-size

Также transition можно применить к размеру изображения (background-size).

.button {
    display: inline-block;
    height: 129px;
    width: 129px;
    background: url(/demo/transition.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    transition: background-size 0.5s ease;
}

.button:hover a {
    background-size: 80px 80px;
}

Как дополнение, можно добаввить смену background-image:

.button {
    display: inline-block;
    height: 129px;
    width: 129px;
    background: url(/demo/transition.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    transition: background-size 0.5s ease;
    transition: background 0.5s ease;
}

.button:hover a {
    background-size: 80px 80px;
    background-image: url(/demo/transition-active.png);
}