Как сделать плавное центрирование блока с помощью css?

Question

[FlatUser]

У меня есть блок который начинается с права страницы.
Как сделать его (автоматическое) центрирование плавным (как с применением transition) на чистом css (т.е без js)? Если такое вообще возможно..

Comments

[Rustam Bainazarov]

Покажите код. Ответ зависит от вашего кода. Ну а так, 99.9%, что нельзя.

[FlatUser]

Рустам Байназаров,

<div class="wrap">
    <div class="block">
        <p>Рандомный текст</p>
    </div>
</div>

[Rustam Bainazarov]

FlatUser, это не код. Где CSS?

А так, margin: 0 auto (для block), text-align: center (для inline-block) и justify-content: center (для flex)— это всё не анимируется.

[FlatUser]

Рустам Байназаров, да я это понимаю, какой то вариант вообще был? Я написал что центрирование должно быть автоматическим) Судя по всему сделать это с помощью css невозможно

[Rustam Bainazarov]

FlatUser, ну ежели вы привели нормальный пример, а не три тега, тогда можно было что-то придумать.

[FlatUser]

Рустам Байназаров, если я пропишу две строчки css-а которые по флексу центрируют, то это поменяло бы ситуацию?

[Rustam Bainazarov]

FlatUser, нет, конечно, это не анимируемое свойство:


Отключайте выравнивание в инспекторе, чтобы проверить.

[xonar]

FlatUser, Конечно бы изменило. По вашему огрызку кода, блок явно не справа начинается как у вас в описание. Или люди должны тратить на вас своё время, а вы даже по просьбе не можете опубликовать весь код? Или тут все должны за вас не то что додумывать, но и придумывать с нуля?

[xonar]

Рустам Байназаров, Я возможно неверно понял вопрос, но он имеет ввиду чтоб блок который справа находится плавно перемещается в центр. Справа в центр. Это же можно сделать анимацией.

[Rustam Bainazarov]

xonar, да, на transform или margin, поэтому я и хочу увидеть его код и больше подробностей условий, когда это надо делать и при каких обстоятельствах.

[Rustam Bainazarov]

xonar, не хочется с телефона 10 раз переписывать. Хочется, чтобы человек нормально дал информацию.

[xonar]

Рустам Байназаров, Думаю, что информации ему достаточно чтоб самому реализовать это. Человек не сильно уж и хочет предоставлять все данные)

[Rustam Bainazarov]

xonar, LOL, да, надеюсь.

Answer 1

[Dubrovin]

1. Верстаете так, чтобы блок был по центру
2. Вешаете на блок анимацию через keyframe, которая в 0% перемещает через transformX блок к правому краю страницы, а в 100% возвращает его назад.

Answer 2

[OneStepCloser]

https://jsfiddle.net/21mtau78/
Если я правильно понимаю, чего хочет автор.