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

#html #css #css3 #svg #css_animation

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

Ответы

Ответ 1

Решение SVG

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

     

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

Итак пишем несколько формул для нескольких патчей, составленных из квадратичных кривых
Безье. Теория здесь.    



	


    

Для написания формул кривых Безье есть - онлайн генератор

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








Анимацию осуществляет команда    

animate attributeName="d" dur="2s"  repeatCount="3"    

в параметр values="M100,100 Q204,200 297,100;M100,100 Q204,167 297,100;   

добавлены через точку с запятой все промежуточные положения квадратичной кривой Безье.    

Ещё один пример анимации квадратичных кривых Безье.


Ответ 2

Благодаря анимации CSS свойства transform.



div {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  border-bottom: 2px solid black;
  animation-name: animation;
  animation-duration: 2s;
}

@keyframes animation {
  from { transform: none; }
  to { transform: rotateX(180deg); }
}








C помощью двух блоков, CSS-анимаций и игрой с border-radius.



div {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
#top {
  animation-name: top;
  animation-duration: 2s;
}
#bottom {
  animation-name: bottom;
  animation-duration: 2s;
  animation-delay: 2s;
}
@keyframes top {
  from {
    border-radius: 50%;
    border-bottom: 1px solid black;
    height: 100px;
  }
  to {
    border-radius: 0%;
    border-bottom: 1px solid black;
    height: 50px;
  }
}
@keyframes bottom {
  from {
    border-radius: 0%;
    border-top: 1px solid black;
    margin-top: -50px;
  }
  to {
    border-radius: 25%;
    border-top: 1px solid black;
    margin-top: -75px;
  }
  100% {
    border-radius: 50%;
    border-top: 1px solid black;
    margin-top: -100px;
  }
}