Как реализовать такую css анимацию?

Question

[Alice777]

Есть набросок кода: https://jsfiddle.net/JohDak/k27hh1jm/1/
Анимация в примере проходит сначала медленно, затем все быстрее за счет того, что бордер задан в VH(это необходимо для адаптивности, в пикселях на мобильном не подстраивается) и он чем больше к краю, тем большее значение VH требует. Помогите реализовать эту анимацию плавно и равномерно

Answer 1

[Ivan Bogachev]

Используйте другую функцию (animation-timing-function):

везде_где_есть_эта_анимация {
    animation: flipOutRight 7s cubic-bezier(0,1,0,1);
}