Как сделать более плавную анимацию?

Question

[DeveloperV]

Как сделать, чтобы форма выезжала плавно из под кнопки? Получилось только с помощью opacity, но хотелось бы не применять это свойство.
https://varfolomeisafronov.github.io/sedona/

@keyframes show {
    0% {

        transform: translateY(-100px);
        opacity: 0;
    }

    20% {

        transform: translateY(-80px);
        opacity: 0.2;
    }

    40% {

        transform: translateY(-60px);
        opacity: 0.4;
    }

    60% {

        transform: translateY(-40px);
        opacity: 0.6;
    }

    80% {

        transform: translateY(-20px);
        opacity: 0.8;
    }

    100% {

        transform: translateY(0);
        opacity: 1;
    }
}

.search__form.show {
    display: block;
    animation-name: show;
    animation-duration: 0.6s;
}

var button = document.querySelector("#button");
    var form = document.querySelector(".search__form");

    button.addEventListener("click", function(evt) {
        evt.preventDefault();
        form.classList.toggle("show");
    })

Comments

[Rustam Bainazarov]

Зачем это всё, когда надо так:

keyframes show {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
   
    100% {
        transform: none;
        opacity: 1;
    }

}

Вы сами сделали несколько шагов, из-за которых анимация останавливается на мгновение из-за стандартного animation-timing-function: ease.

[DeveloperV]

Рустам Байназаров, Да, но хотелось бы сделать, чтобы форма постепенно выезжала из под кнопки, а тут почти целиком получается

[Rustam Bainazarov]

DeveloperV, в плане постепенно? Очень размытое описание. Без понимания того, как у вас должна выглядеть анимация (пример), сложно сказать что-то конкретное, ибо вариантов может быть бесконечное число:
1. сначала едет до конца, потом отскакивает и лишь потом останавливается
2. выезжает первые 80% времени медленно, потом резко, в последние 20%, ускоряет движение

Ну и т. п.