1. Если хотите изучить JS, то начать нужно с удаления JQuery из вашей работы. Вы же даже, скорее всего, не понимаете, что происходит под капотом вызова .css('display', 'none').
2. Через display none/block/flex дом-элементы не анимируются. Используйте visibility и opacity в связке с абсолютным позиционированием (visibility: 0 не убирает из dom элемент)
3. Настройки нужных таймингов анимации надо делать через transition или через keyframes, а не через цепочку удаления/добавления классов.
4. Если уж прям очень надо - в JS есть ивент transitionend, который дожидается окончания анимации и делает, что укажете в коллбеке.