Задержка выравнивания текста CSS с анимацией ширины
Я пытаюсь анимировать свой текст, чтобы он отображался слева направо при загрузке страницы. Для этого просто установите для @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
Вы анимируете 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>Вы анимируете width div. Таким образом, содержимое будет отображаться по мере увеличения ширины. В качестве альтернативы вы можете анимировать псевдоселекторы и отображать текст.
Надеюсь, это именно тот результат, которого вы ожидаете.
Ах, это именно то, к чему я стремился, спасибо! Чтобы убедиться, что я понимаю вас и @serg относительно того, как width и text-align взаимодействуют в анимации - правильно ли я говорю, что text-align проверяет размер <div> на каждом кадре анимации? Как только он расширяется достаточно широко, чтобы за пределами текста оставалось дополнительное пространство, он сдвигает текст, чтобы он оставался по центру?
да. Сначала ширина контейнера должна быть меньше ширины текста. По мере того, как происходит анимация, контейнер постепенно увеличивается в ширину и, наконец, становится шире, чем текст. Затем текст начинал выравниваться по центру.
Вы можете рассмотреть вложенный элемент, в котором вы применяете ту же ширину, а затем полагаетесь на переполнение, чтобы скрыть его и сохранить текст без изменений:
@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>Добро пожаловать, @ 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>Надеюсь, это поможет тебе.
Спасибо, я сам это обнаружил. Однако я хочу, чтобы он отображался слева направо, начиная с буквы «W», поэтому я не думаю, что могу использовать
marginв этом случае.