Плавное изменение background
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);
}