Проблема с анимацией меню

[AlexBes]

При наведении на пункты левого меню, иконки красиво выезжают, это благодаря анимации transition для ширины иконки, но этот же метод в правой части не работает. Методом проб и ошибок выяснила, что иконки будут красиво выезжать только когда прижаты к правому краю.

 

В правом меню на последнем пункте видно, что анимация работает так как надо только, если элементу задан right.
Пробовала задавать при наведении margin-left и его анимировать, но эффект все равно не тот.

 

Уже всю голову над этим сломала. Может я что-то упускаю? Или это в принципе невозможно?

Живой вариант

[xzarxzes]

При наведении на пункты левого меню, иконки красиво выезжают, это благодаря анимации transition для ширины иконки, но этот же метод в правой части не работает. Методом проб и ошибок выяснила, что иконки будут красиво выезжать только когда прижаты к правому краю.

 

В правом меню на последнем пункте видно, что анимация работает так как надо только, если элементу задан right.

Пробовала задавать при наведении margin-left и его анимировать, но эффект все равно не тот.

 

Уже всю голову над этим сломала. Может я что-то упускаю? Или это в принципе невозможно?

Живой вариант

А зачем вам именно ширину анимировать, вам просто передвинуть background разве не подойдет ? http://jsfiddle.net/xzarxzes/fJ4r9/. Или позицию элемента http://jsfiddle.net/xzarxzes/FrNvB/.

Edited May 29, 2014 by xzarxzes

[afdw]

 

При наведении на пункты левого меню, иконки красиво выезжают, это благодаря анимации transition для ширины иконки, но этот же метод в правой части не работает. Методом проб и ошибок выяснила, что иконки будут красиво выезжать только когда прижаты к правому краю.

 

В правом меню на последнем пункте видно, что анимация работает так как надо только, если элементу задан right.

Пробовала задавать при наведении margin-left и его анимировать, но эффект все равно не тот.

 

Уже всю голову над этим сломала. Может я что-то упускаю? Или это в принципе невозможно?

Живой вариант

А зачем вам именно ширину анимировать, вам просто передвинуть background разве не подойдет ? http://jsfiddle.net/xzarxzes/fJ4r9/. Или позицию элемента http://jsfiddle.net/xzarxzes/FrNvB/.

 

Потому что получится так. Тогда надо два спрайта.

[AlexBes]

afdw, вы правильно поняли, так как раз не надо, а по поводу двух спрайтов можете подробнее рассказать?

[xzarxzes]

http://jsfiddle.net/xzarxzes/Q5ZSb/ Вот вам остается только картинки выровнять

[AlexBes]

http://jsfiddle.net/xzarxzes/Q5ZSb/ Вот вам остается только картинки выровнять

гениально! у вас совсем другой подход, я бы не додумалась так сделать ) спасибо большое, выровняла - смотрится отлично