Есть ли способ медленно добавлять буквы в текст с помощью css?
Я хочу отобразить слово (предположим, медленно), есть ли способ сначала отобразить «медленно», а затем с помощью анимации CSS добавить несколько O посередине, делает это от Медленно до Sloooooow.
Я использую последнюю версию Chrome, поэтому приветствуются любые функции CSS3 / HTML5.
Ответы 5
Вы можете рассмотреть возможность анимации максимальной ширины диапазона, как показано ниже.
.slow {
display: inline-block;
vertical-align: bottom;
max-width: 0.5rem;
overflow: hidden;
animation: slow 2s ease forwards;
}
@keyframes slow {
from {
max-width: 0.5rem;
}
to {
max-width: 3rem;
}
}<span>Sl</span><span class = "slow">oooooo</span><span>w</span>Я единственный, кто видел только половину o после завершения анимации? Safari 12 / MacOS Mojave ... - Да, он отлично работает в Chrome, но по какой-то странной причине не в сафари ....
@somethinghere Это становится еще более странным: на iOS (последняя версия) при первом запуске фрагмента он работал нормально, но после этого каждый раз, когда я нажимал кнопку «запустить фрагмент», в поле зрения появлялась только половина o.
Это потому, что 3rem - неправильный способ вычисления ширины текста. Фактическая ширина зависит от шрифта. На моей машине Chrome использует Times New Roman и работает нормально, но Firefox использует Liberation Sans, что не дает.
@isanae Я не думаю, что это так - safari использует Times New Roman, а 3rem фактически относится к размеру :root, который (без изменений) составляет примерно 16 пикселей (rem не имеет ничего общего с размерами шрифта , это только относительно размера пикселя, определенного либо в корне (rem), либо в первом родительском элементе, который его определяет (em)). Не поймите меня неправильно, это может быть так, но все равно странно.
@somethinghere Размер шрифта можно установить в настройках браузера. Если в <html> это 16 пикселей, то 3rem означает 3 * 16, что составляет 48 пикселей. Шесть o в Times 16px действительно составляют ровно 48 пикселей, и я предполагаю, что именно поэтому он здесь используется, поскольку Times часто является шрифтом по умолчанию, где ничего не указано (а фреймы стека в основном не имеют css). Если ваш шрифт не Times, то ширина может быть неправильной. Например, для освобождения при 16px требуется 54 пикселя для шести o.
@isanae Да ладно, в этом отношении шрифт имеет значение. Но я вижу половину O, определенно не больше 8 пикселей. :)
@ 11684 то же самое на Safari OSX 10.13
Вы можете добавить все дополнительные o как элементы <span>, а затем анимировать их все последовательно, используя :nth-child, чтобы выбрать их один за другим:
html, body {
height: 100%;
}
body {
display: flex;
}
h1 {
font-size: 10vw;
margin: auto;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1 span {
max-width: 0;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
@keyframes in {
from { max-width: 0; opacity: 0; }
25% { max-width: 1em; opacity: 0; }
to { max-width: 1em; opacity: 1; }
}
h1 span {
animation: in 1s;
animation-fill-mode: forwards;
}
h1 span:nth-child(1){ animation-delay: 0s; }
h1 span:nth-child(2){ animation-delay: 1s; }
h1 span:nth-child(3){ animation-delay: 2s; }
h1 span:nth-child(4){ animation-delay: 3s; }
h1 span:nth-child(5){ animation-delay: 4s; }
h1 span:nth-child(6){ animation-delay: 5s; }
h1 span:nth-child(7){ animation-delay: 6s; }
h1 span:nth-child(8){ animation-delay: 7s; }
h1 span:nth-child(9){ animation-delay: 8s; }<h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>в Windows, Firefox дополнительные «o» смещены вверх, причем их вершина находится на верхнем конце S и l, а их базовая линия примерно в центре первого o.
@tom Надо передать это Firefox, где inline-block означает «позволяет не выравнивать это по строке»; ничего, что vertical-align: bottom не исправляет, но почему FF должен действовать особенным образом, бог весть.
теперь он отображается правильно.
Да!
/* Taken from http://animista.net/play/entrances/fade-in */
#animate-1 {
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
#animate-2 {
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 1s;
}
#animate-3 {
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 2s;
}
#animate-4 {
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 3s;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<h1 id = "animate-1">S</h1>
<h1 id = "animate-2">L</h1>
<h1 id = "animate-3">O</h1>
<h1 id = "animate-4">W</h1>это просто печатает буквы одну за другой. не то, что я ищу
Этот ответ можно исправить: просто измените все символы на «o», напишите вокруг него sl и w и замените H1 на SPAN.
Просто для удовольствия, вот решение на реальном чистом CSS (т.е. требующее только одного элемента HTML) с использованием свойства CSS content:
.expanding-slow::before {
content: "Slo";
animation: expand-slow linear 3s both;
}
.expanding-slow::after { content: "w"; }
@keyframes expand-slow {
0% { content: "Slo"; }
20% { content: "Sloo"; }
40% { content: "Slooo"; }
60% { content: "Sloooo"; }
80% { content: "Slooooo"; }
100% { content: "Sloooooo"; }
}
.expanding-slow--smooth::before {
display: inline-block;
content: "Sloooooo";
max-width: 3ch;
overflow: hidden;
vertical-align: text-top;
animation: expand-slow--smooth linear 3s both;
}
.expanding-slow--smooth::after { content: "w"; }
@keyframes expand-slow--smooth {
0% { max-width: 3ch; }
100% { max-width: 8ch; }
}Using <code>content</code>:
<p class = "expanding-slow"></p>
Using <code>max-width</code>:
<p class = "expanding-slow--smooth"></p>Использование content не работает в Safari 12 / MacOS Mojave. max-width умеет и умно.
Вот исправленная версия ответа @DarioSanchezMartinez, которая немного ближе к вашей спецификации.
/* Taken from http://animista.net/play/entrances/fade-in */
#animate-1 {
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
#animate-2 {
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 1s;
}
#animate-3 {
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 2s;
}
#animate-4 {
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 3s;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}SL<span id = "animate-1">o</span><span id = "animate-2">o</span><span id = "animate-3">o</span><span id = "animate-4">o</span>W
Я не уверен, но вы ищете этот тип анимации codepen.io/geoffgraham/pen/jrWwWM?