2

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

.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>

3
  • @LevShportak transition не подходит под text-align 4 авг 2021 в 13:42
  • Является ли разделение текста на элементы с блочным представлением (в данном случае параграфы) условием задачи?.. или надо чтобы с <br>'ами и white-space: pre[-line]; тоже работало?
    – yar85
    4 авг 2021 в 15:58
  • Да, являются условием задачи именно и только P
    – Павел
    5 авг 2021 в 6:09

2 ответа 2

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>

2
  • у вас почему-то переход в обратное состояние без анимации 4 авг 2021 в 13:43
  • 1
    Вариант хороший, но есть проблемы. Если заголовок сильно больше текста, то он сразу ждет пока текст преодолеет определенную ширину, а потом только начинает двигаться. Так же если поставить не 1s, а 3 и больше, то после наведения нужно ждать эти 3 секунды, чтобы навести еще раз, ибо он не успеет вернуться в исходное положение и начнет с того момента где остановился, а так как плавной анимации назад нет, то выглядит плохо
    – Павел
    4 авг 2021 в 13:55
1

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

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

и условий:

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

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

.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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.