CSS задержка выравнивания текста с анимацией ширины - PullRequest
Новая
       58

CSS задержка выравнивания текста с анимацией ширины

0 голосов
/ 30 августа 2018

Я пытаюсь анимировать мой текст, чтобы он отображался слева направо при загрузке страницы. Это можно сделать, просто установив @keyframes для перехода от 0% max-width к 100%.

Однако мои настройки выравнивания текста, похоже, применяются только после завершения анимации. Я просто хочу, чтобы текстовое содержимое само показывало, где я его хочу, и предполагал, что мой код верен.

Я что-то упускаю здесь очевидное? Я довольно новичок в CSS, но мои исследования, похоже, не указывают на наличие наследуемых свойств анимации или выравнивания текста, которые должны вызывать это. Пример кода ниже. Спасибо! 

@keyframes leftright {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  white-space: nowrap;
  width: 80vw;
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  text-align: center;
  animation: leftright 1s;
}
<div class="test_1">Why hello there</div>

Ответы [ 4 ]

0 голосов
/ 30 августа 2018

Добро пожаловать @ user10294993! Вы можете сделать это, добавив два ключевых кадра: один для де-бокс и другой для текста. Вот пример: 

.test_1 {
	overflow:hidden;
	white-space: nowrap;
	width: 80vw;
	border: 1px solid red;
	font: bold 15vmin 'Playfair Display', serif ;
	text-align: center;
	animation: leftright 1s infinite;
}

.test_1 p {
  margin: 0;
  animation: display 1s infinite;
} 

@keyframes leftright{
  from {max-width: 0%}
  to {max-width: 100%;}
}

@keyframes display{
  0% {opacity: 0}
  50% {opacity: 0}
  100% {opacity: 1}
}
<div class="test_1"><p>Why hello there</p></div>

Надеюсь, это поможет вам.

0 голосов
/ 30 августа 2018

Вы оживляете width div. Таким образом, содержание будет раскрываться по мере увеличения ширины. Кроме того, вы можете анимировать псевдоселекторы и открывать текст.

Надеюсь, это ожидаемый результат.

JS Fiddle

0 голосов
/ 30 августа 2018

Вы можете рассмотреть вложенный элемент, к которому примените ту же ширину, а затем положитесь на переполнение, чтобы скрыть его и сохранить текст без изменений: 

@keyframes leftright {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  width: 80vw;
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  text-align: center;
  animation: leftright 1s;
}

.test_1>span {
  display: inline-block;
  white-space: nowrap;
  width: inherit;
}
<div class="test_1"><span>Why hello there</span></div>
0 голосов
/ 30 августа 2018

Вы анимируете width элемента. Выравнивание текста по центру проявляется только при наличии дополнительного пространства. Однако очень простое решение - центрировать div с помощью margin: 0 auto;.

. 

@keyframes leftright {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  width: 80vw;
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  text-align: center;
  animation: leftright 1s infinite;
}
<div class="test_1">Why hello there</div>
...