Псевдо класс на подобии :hover

Общее
1

Добрый день уважаемые.
У меня возникло пара вопросов, надеюсь вы подскажете как решить.
https://jsfiddle.net/tgvjntmw/

  1. Можно ли выравнять текст(внурянку) строчного элемента, относительно размеров строчного элемента. Иначе говоря, как слово Word в центре своего расположения сдвинуть, не оборачивая в блок.
  2. Есть ли псевдо-класс, аналогичный :hover но что б анимация срабатывала по попаданию в область элемента, и отрабатовалась до последнего кадра? в данном случае, если навести курсор на элемент, а потом убрать, то анимация обрубаеться, а объект возвращается в начальное положение. (или тут только через JS ? )
2
  1. В вашем примере все элементы блочные, и параграф тоже. В центре чего вы хотите расположить слово, в центре квадрата, в центре круга, может быть?
  2. Без js не обойтись, я думаю.
3

А с чего это у меня параграф блочныйм элементом стал? Я ведь ему display: block не ставил, а просто задал width: и height:

4

В смысле?
Вообще-то тег <p> является блочным по умолчанию.
Элемент является блочным не только тогда, когда ему явно прописано display: block;

2 лайка