0xD34F

Убрать классы hand-* (и, соответственно, js-код, который эти классы переключает), убрать keyframes.

Задать элементу с изображением длительность смены состояния:

.btn::after {
  transition-duration: 1s;
  ...
}

Указать, как должно измениться состояние при наведении курсора:

.btn:hover::after {
  transform: translateX(30px) translateY(-40px);
}

Всё.

Дефолтная ширина блока половина, а для :nth-child(odd):last-child полная. Типа так.

погуглил за вас

.panel {
  padding: 0 15px;
  transition: all 0.4s;
  height: 0;
  overflow: hidden;
}

.faq-item.active .panel {
  padding: 15px 15px 20px;
}

.faq-item.active .cross {
  transform: rotate(45deg);
}

const containerSelector = '.faq-list';
const itemSelector = '.faq-item';
const headerSelector = '.accordion';
const contentSelector = '.panel';
const activeClass = 'active';
const toggle = item => item
  ?.closest(containerSelector)
  ?.querySelectorAll(itemSelector).forEach(n => {
    const state = n === item && !n.classList.contains(activeClass);
    const content = n.querySelector(contentSelector);
    n.classList.toggle(activeClass, state);
    content.style.height = `${state ? content.scrollHeight : 0}px`;
  });

document.addEventListener('click', e => {
  toggle(e.target.closest(headerSelector)?.closest(itemSelector));
});

// или

document.querySelectorAll(headerSelector).forEach(n => {
  n.addEventListener('click', toggle.bind(null, n.closest(itemSelector)));
});

Время, которое я задаю, применяется к fadeOut, а вот к runProgress нет

Окей, посмотрим на эти fadeOut и runProgress:

this.fadeOut = `fadeOut ${this.time}s linear forwards`,
this.runProgress = `runProgress ${this.time}s liner forwards`,

Вам вопрос: чем отличаются эти две строки (конечно, помимо имён анимаций)?

UPD. А это вообще нормально - всем назначать одно и то же значение? В смысле, в шаблоне эти fadeOut и runProgress используются для задания анимации элементам, у которых есть предок с v-for. Если изменить значение свойства time и добавить в messages новый элемент, то у тех, что были добавлены раньше, изменится длительность анимации. Наверное, стоит вырезать свойства fadeOut и runProgress, элементам messages при создании добавлять актуальное значение свойства time, типа time: this.time, и использовать его при задании стилей:

methods: {
  getStyle: (name, { time }) => ({
    animation: `${name} ${time}s linear forwards`,
  }),
  ...

:style="getStyle('fadeOut', message)"

:style="getStyle('runProgress', message)"

селектор перетаскиваемого элемента:active {
  cursor: что сюда можно вписать, смотрите здесь - developer.mozilla.org/en-US/docs/Web/CSS/cursor
}

ul {
  counter-reset: item;
}

ul li {
  counter-increment: item;
}

ul li::marker {
  content: counter(item, lower-alpha) ") ";
}

https://jsfiddle.net/duja84ys/

Добавить блоку с текстом

white-space: nowrap;
position: absolute;

https://jsfiddle.net/b5koa7dm/

li:first-child:hover ~ li:last-child {
  display: none;
}

input[type=checkbox], label{

Вместо , должен быть +.

А чекбоксу надо задать display; none;.

https://www.google.com/search?q=css+glass+effect

когда нажимаю на другой блок, то цвет кнопки не становится прежним

Становится. Проявите немного терпения, вам и четырёх месяцев ждать не придётся:

transition: background 9999999s;

Правда, происходит это вовсе не по причине нажатия на другой блок - что такое псевдокласс :active вы, очевидно, не разобрались.

Cделайте скрытые радиокнопки, которые будут нажиматься через label, и стилизуйте в качестве "нажатых" элементы, расположенные после :checked.

Заменить :valid на :not(:placeholder-shown).

Самому элементу, соответственно, добавить непустой атрибут placeholder. Поскольку реально он не нужен, то пусть это будет пробел - чтобы было не видно.

li:not(:first-child, :last-child)

или

li:not(:first-child):not(:last-child)

или

li {
  /* тут стили для всех элементов */
}
li:first-child,
li:last-child {
  /* здесь сбрасываете стили, установленные выше */
}

https://jsfiddle.net/6zxdwear/

Добавьте pointer-events: none; для .modal::before.

<div className="todoListMain">
    <div className="header">

.todoListMain.header input {

Это какое-то невероятное позорище, оправданий которому нет. Пробел между .todoListMain и .header куда потерялся? Ну и с остальными стилями косяк тот же.

.active {
  background: red;
}

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  t.closest('tr').classList.toggle('active', t.checked);
});

// или

document.querySelectorAll('table tr').forEach(function(n) {
  n.addEventListener('change', this);
}, e => e.currentTarget.classList.toggle('active', e.target.checked));

UPD. Наконец-то дождались, js теперь тут не нужен:

tr:has(.form-check-input:checked) {
  background: red;
}

Можно сбросить в 0 продолжительность выполнения анимации: transition-duration: 0ms;.
Или вообще убрать её: transition: none;.

Как это будет выглядеть на практике: определяете в стилях класс, который убирает анимацию, в компоненте определяете свойство, в зависимости от значения которого класс будет назначаться элементу. Надо, чтобы анимация воспроизводилась - устанавливаете свойству значение true, не нужна анимация - false. Как-то так.

Инкапсуляция стилей реализуется путём добавления уникального (в пределах компонента) атрибута элементам и, соответственно, селекторам в css-коде. Вы создаёте элементы вручную, так что нужный атрибут у них отсутствует - поэтому стили не применяются. Чтобы применились, можно воспользоваться т.н. глубоким селектором - для этого замените .frame { на .slider /deep/ .frame {.