Максим

ховер на .th-search-box не срабатывает, почему?

Потому что никакого ховера у вас там нет, нечему срабатывать.

Я бы предположил, что

.th-icon-box:hover .th-search-box

стоит заменить на

.th-icon-box:hover + .th-search-box,
.th-search-box:hover

не знаю как в jq, но в js это делается так

Родительскому элементу задай

display: flex; 
align-items: center;
justify-content: center;

Пример:

https://jsfiddle.net/23234234/5o41zw6e/

Очень легко флексами центрировать контент. У родительского блока указываешь:

display:flex;
justify-content:center;

jsfiddle.net/z40rc89s

Прописываем анимацию transition
При добавлении элемента вешаем на него класс hidden или типа того.
После добавления - снимаем этот класс. Так, чтобы запустилась анимация.

<div class="1">

Числа в качестве имён классов использовать не надо.

Убрать transition, добавить анимацию: animation: show 10s;.

Анимироваться будет прозрачность:

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Можно так
Кривую в viewBox нужного размера можно сгенерировать любым онлайн генератором, например, тут.

<div class=wrapper>
  <div>Text1</div>
  <div>Text2</div>
</div>

.wrapper {
  display: flex;
  justify-content: space-between;
}

Как получить элементы:

const links = document.querySelectorAll('a');
// или
const links = document.getElementsByTagName('a');

Как достать значение атрибута:

const getHref = el => el.getAttribute('href');
// или
const getHref = el => el.attributes.href.value;

Как собрать массив значений:

const hrefs = Array.from(links, getHref);

// или

const hrefs = Array.prototype.map.call(links, getHref);

// или

const hrefs = [];
for (const n of links) {
  hrefs.push(getHref(n));
}

// или

const hrefs = [];
for (let i = 0; i < links.length; i++) {
  hrefs[i] = getHref(links[i]);
}

body {
  overflow: hidden;
}

В новых версиях есть функция перспективы: сначала обозначаете края слоя, а потом наклоняете их как вам заблагорассудится. Функция находится в меню Edit и называется Perspective Warp

pointer-events: none;

Так? https://jsfiddle.net/moq9m5fc/5/

$('ul').click(function(e) {
  e.stopPropagation();
  const $li = $(e.target).closest('li');
  if ($li.length) {
    $li.children('ul').toggle();
    $li.siblings().children('ul').hide();
  }
}).find('ul').hide();

https://jsfiddle.net/297m5euz/

getElementsByClassName() возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствуюих всем из указанных имен классов.

https://developer.mozilla.org/ru/docs/Web/API/Docu...

То есть там не один элемент возращается, а некий список. Вам придется открыть учебник и прочитать что такое "массив". И как обращаться к элементам массива.

Ну или научиться в делегирование, но это еще сложнее.

Код написанный табами может отображаться по-разному в зависимости от настроек редактора. А пробелы остаются пробелами и с ними такой проблемы нет. Пробелы это стандарт в большинстве больших компаний и в open source сообществе.
Еще программисты использующие пробелы в среднем больше зарабатывают. Но это от того, что в хороших компаниях высокие стандарты к качеству кода.
Современные IDE(вроде Webstorm) по-умолчанию заменяют табы на пробелы.