Как при наведении плавно выровнять текст по центру

Question

Нужно чтобы весь текст был по центру и плавно это происходило, а не скачком и возвращался чтобы тоже плавно

.title {
  transition: 1s;
}

.title:hover {
  text-align: center;
  transition: 1s;
}

.title:hover~.block{
  text-align: center;
}

<div>
  <h1 class="title">Текст</h1>
  <div class="block">
    <p class="text">длииииииииииииинный текст </p>
    <p class="text"> короткий текст </p>
    <p class="text"> обычный текст </p>
    <p class="text"> снова длииииииииинный текст </p>
    <p class="text"> короткий текст</p>

  </div>
</div>

Answer 1

Как вариант, можно заанимировать width.

.title,
.block {
  transition: width 1s;
  width: 0;
  white-space: nowrap;
}

.title:hover {
  text-align: center;
  transition: 1s;
  width: 100%;
}

.title:hover~.block{
  text-align: center;
  width: 100%;
}

<div>
  <h1 class="title">Текст</h1>
  <div class="block">
    <p class="text">длииииииииииииинный текст </p>
    <p class="text"> короткий текст </p>
    <p class="text"> обычный текст </p>
    <p class="text"> снова длииииииииинный текст </p>
    <p class="text"> короткий текст</p>
  </div>
</div>

Answer 2

Если исходить из вопроса:

Как при наведении плавно выровнять текст по центру

и условий:

Нужно чтобы весь текст был по центру и плавно это происходило, а не скачком и возвращался чтобы тоже плавно

то задача решается просто:

.title, .text {
  width: min-content;
  white-space: nowrap;
  transition: 3s ease;
}

div:not(.block):hover .title, div:not(.block):hover .text {
  margin-left: 50%;
  transform: translatex(-50%);
}

<div>
  <h1 class="title">Текст длииииииииииииинный</h1>
  <div class="block">
    <p class="text">длииииииииииииинный текст</p>
    <p class="text">короткий текст</p>
    <p class="text">самый обычный текст</p>
    <p class="text">снова длииииииииинный текст</p>
    <p class="text">короткий текст</p>
  </div>
</div>

БЛОГ НА HUSL

Как при наведении плавно выровнять текст по центру

Ответы (2 шт):