Николай Алексеев

Анимация не работает потому что в переменной --animation-duration скорее всего содержится <число>ms. Если указать только число, то всё будет работать.

Однако зачем такие calc(var(--animation-duration) * 1ms) сложности? Неужели не проще написать напрямую время анимации или пусть даже в переменной, но без calc() и прочего? Для чего лишние вычисления и прочие операции? Не нужно ничего усложнять.

Можно написать намного проще.

Указываем нужное время анимации в переменной:

--animation-duration: 500ms;

Используем без всяких наворотов и лишних движений:

.add-panel_button.sending .svg{
    animation: fly-out-in var(--animation-duration) ease-in-out;
}

В скрипте тоже содержится достаточно лишнего кода. Вместо setTimeout можно прослушивать событие animationend на нужном элементе и тогда лишние вычисления станут реально "лишними" и их можно будет удалить.

addTodoButton.addEventListener("click", () => {
     addTodoButton.classList.add("sending");
     addTodoButton.addEventListener("animationend", e => {
               addTodoButton.classList.remove("sending");
               addItem();
          }, { once: true }
     );
});