Помогите создать 'Выпадающий' блок поиска по сайту

`Ребят, написал код, при котором выпадающая строка поиска по сайту скрывается и появляется при помощи visability.

Теперь вопрос остался, а как всё-таки это чудо анимировать? Подскажите, в каком направлении анимировать - дальше создам всё сам))) Анимация нужна от выпадания строки по кубик-бизье, и дальше что-нибудь ещё.

Если добавляю transition - появляется задержка перед выполнением скрипта.

Вопрос: Через какие ключевые слова, строки в CSS прописывать анимации для этой конструкции?

.search-wrapper {
    .search {
        position: absolute;
        padding: 0 30px 0 10px;
        right: 0;
        top: -2px;
        line-height: 65px;
        cursor: pointer;


        svg {
            transition: fill 0.25s ease;
        }

        &:hover svg {
            fill: lighten(#8A8686, 15%);
        }
    }

    .search-field {
        visibility: hidden;
        opacity: 0%;
        transition: .5s, ease-out;
        position: absolute;
        left: 0px;
        top: 65px;
        padding: 15px;
        background-color: lighten($dark, 3%);
        width: 100%;
        border-top: lighten($dark, 7%) 1px solid;
        z-index: 5;

        input[type=text] {
            width: 100%;
            padding: 8px 15px;
            border: lighten($dark, 7%) 1px solid;
            background-color: lighten($dark, 7.5%);
            font-size: 16px;
            color: #f0f0f0;
            outline: none;

            &:focus {
                border-color: lighten($dark, 10%);
            }

            &::placeholder {
                color: rgba(255, 255, 255, .2);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                font-style: italic;
                text-align: center;
            }
        }
    }
}

<div class="search-wrapper" title="Поиск по сайту">
                <div class="search" >
                    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    
                    x="0px" y="0px" width="25px" height="25px" fill="#8A8686" viewBox="0 0 487.95 487.95"
                        style="enable-background:new 0 0 487.95 487.95;" xml:space="preserve">
                        
                        <g>
                            <g>
                                <path d="M481.8,453l-140-140.1c27.6-33.1,44.2-75.4,44.2-121.6C386,85.9,299.5,0.2,193.1,0.2S0,86,0,191.4s86.5,191.1,192.9,191.1
                                c45.2,0,86.8-15.5,119.8-41.4l140.5,140.5c8.2,8.2,20.4,8.2,28.6,0C490,473.4,490,461.2,481.8,453z M41,191.4
                                c0-82.8,68.2-150.1,151.9-150.1s151.9,67.3,151.9,150.1s-68.2,150.1-151.9,150.1S41,274.1,41,191.4z" />
                            </g>
                        </g>

                    </svg>
                </div>
                <div class="search-field" >
                    <form action="/search.html" id="cse-search-box">
                        <input type="hidden" name="cx" value="partner-pab-xxx:xxx">
                        <input type="hidden" name="cof" value="FORID:10">
                        <input type="hidden" name="ie" value="UTF-8">
                        <input type="text" name="q" placeholder="Поиск по сайту...">
                    </form>
                </div>
            </div>