Открывающееся окно поиска

Для начала попробуйте ввести текст в окно поиска ниже. Если вам понравился эффект, можете читать дальше.

Если на вашем сайте уже есть выпадающий поиск, но выпадает он не так красиво, то для выпадающей области можно прописать следующий код

Это стиль для анимации появления

  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  -webkit-transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
  transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;

А это анимация скрытия

 -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  pointer-events: none;
  -webkit-transition: opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
  transition: opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
  transition: transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09), opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s;
  transition: transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09), opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);