Как мне остановить анимацию CSS от прыжка на обновлении? ⇐ CSS

[Anonymous]

Я работаю над некоторыми анимациями на падении для кнопок в CSS. Я хочу, чтобы кнопки имели гладкий переход при парящем и неактивном, но не могут использовать JS для этого. Мои анимации работают отлично, но анимация несоберна играет на загрузке страницы. < /P>
Есть ли лучший способ обратить вспять анимацию на нестандартно? моя анимация на падении: < /p>

Код: Выделить всё

.new-anim:hover {
animation: notch 300ms ease-in;
animation-fill-mode: forwards;
}

@keyframes notch {
0% {clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);}
25% {clip-path: polygon(0% 12.5%, 7.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
50% {clip-path: polygon(0% 25%, 15% 0%, 100% 0%, 100% 100%, 0% 100%);}
75% {clip-path: polygon(0% 37.5%, 22.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
100% {clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);}
}
< /code>
и вот мой нестандарт: < /p>
.new-anim {
animation: denotch 300ms ease-out;
animation-fill-mode: forwards;
}

@keyframes denotch {
0% {clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);}
25% {clip-path: polygon(0% 37.5%, 22.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
50% {clip-path: polygon(0% 25%, 15% 0%, 100% 0%, 100% 100%, 0% 100%);}
75% {clip-path: polygon(0% 12.5%, 7.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
100% {clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

Установите обратную анимацию, и она течет правильно, но она воспроизводит анимацию, когда страница сначала загружается.

Подробнее здесь: https://stackoverflow.com/questions/794 ... on-refresh