Для плавного перехода используйте transition. Только тогда вместо display: none для неактивных табов используйте visibility: hidden. Но там ещё могут возникнуть проблемы из-за разной высоты табов.. Но можно решить, например, установив overflow: hidden и менять высоту скрытым табам. Опять же, можно задать transition: all .3s, height 0s, а для скрытого состояния (задаём, например с помощью класса .hidden) transition: all .3s, height 0s .5s, - при скрытии "схлопнется" после затухания...
А ещё, можно вообще организовать переключение без скрипта, а с использованием псевдокласса :target. Только тогда лучше якоря скрывать с помощью display: none, чтоб страница к ним не прокручивалась, а для показывания-скрытия нужных блоков и подсвечивания активных табов использовать соседские селекторы
