Можно ли сделать с помощью css такую анимацию?

Можно ли с помощью CSS сделать такую анимацию, чтобы некую выпуклость превратить в вогнутость ? Если да, то с помощью чего ?

Ответ

Решение SVG
Реализовать кривую такой формы проще всего с помощью Кривых Безье второго порядка.

Из рисунка выше видно, что можно получить последовательные кадры анимации, как у автора вопроса. Для этого надо изменять у параметра Q координаты x1 и y1
Итак пишем несколько формул для нескольких патчей, составленных из квадратичных кривых Безье. Теория здесь.

Для написания формул кривых Безье есть - онлайн генератор
На втором этапе делаем анимацию движения кривой, путем последовательного перебора всех кривых Безье.

Анимацию осуществляет команда
animate attributeName="d" dur="2s" repeatCount="3"
в параметр values="M100,100 Q204,200 297,100;M100,100 Q204,167 297,100;
добавлены через точку с запятой все промежуточные положения квадратичной кривой Безье.
Ещё один пример анимации квадратичных кривых Безье.