Анимацию можно легко сделать через CSS свойство transition например для кнопок, меню и т.д. Подробнее на htmlbook.ru.
Например, изображение меняются при наведении на него курсора мыши (:hover).
<a class="button" href="#"></a>.button {
display: inline-block;
height: 129px;
width: 129px;
background: url(/transition.png) 0 0 no-repeat;
transition: background 0.2s ease;
}
.button:hover {
background-image: url(/transition-active.png);
}Также transition можно применить к размеру изображения (background-size).
.button {
display: inline-block;
height: 129px;
width: 129px;
background: url(/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(/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(/transition-active.png);
}
