developerV
@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");
    })
  • Вопрос задан
  • 117 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы