Как анимировать иконки из спрайтов?

Question

[GaserV]

Доброй ночи. Есть спрайт. В нем иконки, и иконки при наведении. Получается если задать transition, то при наведении срабатывает не красивая анимация, т.е. если при наведении иконка ниже, то показывается как скролится к этой иконке. Можно ли это дело изменить так, чтобы при наведении, не зависимо от того, где находится иконка, было просто плавное её появление\исчезание?

Answer 1

[trushka]

Можно задать background не самому элементу, а подложенным под него ::before и ::after с position: absolute и z-index: -1. Один из них - с opacity: 0. При наведении, наборот, изначально прозрачному задано opacity: 1, а видимый становится прозрачным

Answer 2

[Константин Отпущенников]

.some-module {
    transition:  background-position 0s, opacity .3s;
}

Начни копать отсуда.

Answer 3

[Олег]

https://jsfiddle.net/joomla/xpk8swdd/