Дополню ответ 0xD34F парой замечаний:
1. Не используйте символы > и < в разметке. Используйте > и <.
2. Код будет в разы понятнее, если в таких компонентах избегать поиска по родителям. Лучше брать один основной корневой элемент для компонента и манипулировать элементами внутри него, а не снаружи.
3. Вы много раз используете find, чтобы искать одни и те же элементы. Кешируйте это дело, ведь элементы не добавляются и не изменяются в процессе.
Mazino, Тут Ana Tudor нашаманила альтернативный вариант этой анимации (правда без поддержки IE/Edge). Очень советую посмотреть в образовательных целях:
P.S.: Количество элементов действительно можно уменьшить в два раза, тут я затормозил немного, но спишем это на воскресенье.
Mazino, в редакторе CodePen есть кнопочка "View compiled CSS", там чистый CSS без хитростей препроцессора - он может быть для вас понятнее, чем исходник.
Приведите ссылку на сайт или сделайте песочницу на codepen/jsfiddle с проблемой. В текущем виде вопроса можно только гадать, что у вас там не работает.
Я могу такую штуку на html/css/js заверстать. А мой знакомый на c++ затащит. В конечном счете язык - дело десятое, лучше исходить из области применения, а там уже смотреть, какие языки и библиотеки лучше подойдут. Где вы планируете такой интерфейс использовать?
1. Не используйте символы
>
и<
в разметке. Используйте>
и<
.2. Код будет в разы понятнее, если в таких компонентах избегать поиска по родителям. Лучше брать один основной корневой элемент для компонента и манипулировать элементами внутри него, а не снаружи.
3. Вы много раз используете find, чтобы искать одни и те же элементы. Кешируйте это дело, ведь элементы не добавляются и не изменяются в процессе.