Анимация набора текста на CSS

223
03 сентября 2021, 13:10

Нашел такой вариант создания анимации набора текста, но он почему-то работает только с текстовым абзацем.
Попробовал сделать тоже самое со span, ничего не работает.

По какой причине? Как сделать тоже самое, только со span?

 .css-typing
 {
  width: 30em;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
 }
 @keyframes type{
 from { width: 0; }
 }
@-webkit-keyframes type{
from { width: 0; }
  }
 <p class="css-typing">This is a paragraph that is being typed by CSS animation.</p>
Answer 1

Потому что тег span имеет свойство display: inline а в инлайновых блоках перенос не будет работать! Если Вам принципиален span то добавьте в css-typing display: inline-block. Код ниже

.css-typing { 
  width: 30em; 
  display: inline-block; 
  /*правка*/ 
  -webkit-animation: type 5s steps(50, end); 
  animation: type 5s steps(50, end); 
} 
 
@keyframes type { 
  from { 
    width: 0; 
  } 
} 
 
@-webkit-keyframes type { 
  from { 
    width: 0; 
  } 
}
<span class="css-typing">This is a paragraph that is being typed by CSS animation.</span>

Answer 2

ну так, просто чтобы было, может пригодится)

можно добавить рандомный таймер в пределах от 100 - 400 (к примеру), чтобы создать иллюзию набора текста человеком

class Writer { 
  constructor(node) { 
    this.node = node; 
     
    if (!this.node) return; 
 
    this.timer = 200; // .2s 
    this.broken = this.node.textContent.split(''); 
 
    this._init(); 
  } 
 
  _init() { 
    this.node.textContent = ''; 
    let i = 0; 
 
    let interval = setInterval(() => { 
      this.node.textContent += this.broken[i]; 
 
      i++; 
 
      if (i >= this.broken.length) clearInterval(interval); 
    }, this.timer); 
  } 
} 
 
const root = document.querySelector('.text'); 
 
new Writer(root);
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
body { 
  font-family: "Roboto", sans-serif; 
  font-size: 24px; 
} 
 
.text { 
  position: relative; 
  width: max-content; 
} 
 
.text::after { 
  content: ""; 
  position: absolute; 
  top: 0; 
  right: 0; 
  height: 100%; 
  width: 1px; 
  background: #333; 
  display: block; 
  animation: blinking 1s infinite; 
} 
 
@keyframes blinking { 
  0% { 
    opacity: 0; 
  } 
  25% { 
    opacity: 0; 
  } 
  50% { 
    opacity: 1; 
  } 
  100% { 
    opacity: 1; 
  } 
}
<div class="text">Lorem ipsum dolor sit.</div>

Answer 3

SVG решение

Обладает более широкими возможностями для анимации текста.

Вот более простой вариант, когда анимация печатания текста реализуется движением букв вдоль растущего path 

@import url(https://fonts.googleapis.com/css?family=Montserrat:700); 
body{ 
  margin:0; 
  width:100%;  
  height:100vh; 
  overflow:hidden; 
  background:hsla(0, 5%, 5%, 1); 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background-image: -webkit-linear-gradient(left bottom, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1)); 
  background-image: linear-gradient(to right top, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1)); 
} 
svg{ 
  width:100%; 
}
<svg width="100%" height="100%" viewBox="100 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
<!--  Трасса и анимация движения букв от нуля до 1100px --> 
 <path id="path"> 
		<animate attributeName="d" values="m0,110 h0;m0,110 h1150;m0,110 h1150" dur="8s" begin="0s" repeatCount="indefinite"/> 
	</path> 
	<text font-size="48" font-family="Montserrat" fill='hsla(36, 95%, 85%, 1)'> 
		<textPath xlink:href="#path">This is a paragraph that is being typed by SVG. 
    </textPath> 
	</text> 
</svg>

2. Вариант горизонтального печатания текста внутри квадратных скобок

К горизонтальной линии, вдоль которой идет анимация текста добавлены скобки, роль которых выполняют маркеры 

<marker id="Marker_left" markerWidth="15" markerHeight="50" refX="20"  refY="40">
 <path d="M15,0 0,0 0,50 15,50" fill="none" stroke="#FDE0B4" stroke-width="5" />
</marker> 
   <marker id="Marker_right" markerWidth="15" markerHeight="50" refX="5"  refY="40">
 <path d="M0,0 15,0 15,50 0,50" fill="none" stroke="#FDE0B4" stroke-width="5" />
</marker>

Дальнейшие пояснения даны в коде программы 

@import url(https://fonts.googleapis.com/css?family=Montserrat:700); 
body{ 
  margin:0; 
  width:100%;  
  height:100vh; 
  overflow:hidden; 
  background:hsla(0, 5%, 5%, 1); 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background-image: -webkit-linear-gradient(left bottom, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1)); 
  background-image: linear-gradient(to right top, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1)); 
} 
svg{ 
  width:100%; 
}
<svg width="100%" height="100%" viewBox="200 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
<defs>   
  <!--  Трасса  движения букв от нуля до 1150px --> 
 <path id="path" marker-start="url(#Marker_left)" marker-end="url(#Marker_right)"> 
		<animate attributeName="d" values="m0,110 h0;m0,110 h1150;m0,110 h1150;m0,110 h0" dur="10s" begin="0s" repeatCount="indefinite"/> 
	</path> 
<marker id="Marker_left" markerWidth="15" markerHeight="50" refX="20"  refY="40"> 
 <path d="M15,0 0,0 0,50 15,50" fill="none" stroke="#FDE0B4" stroke-width="5" /> 
</marker>  
   <marker id="Marker_right" markerWidth="15" markerHeight="50" refX="5"  refY="40"> 
 <path d="M0,0 15,0 15,50 0,50" fill="none" stroke="#FDE0B4" stroke-width="5" /> 
</marker> 
</defs> 
<!--   анимация движения букв от нуля до 1150px --> 
  
	<text font-size="48" font-family="Montserrat" fill='hsla(36, 95%, 85%, 1)'> 
		<textPath xlink:href="#path">This is a paragraph that is being typed by SVG. 
    </textPath> 
	</text>  
	 <!--  Анимация правой квадратной скобки --> 
	 <path id="path" transform="translate(0 0)" d="m0,110 h0" stroke="none" marker-start="url(#Marker_left)" marker-end="url(#Marker_right)"> 
		<animate attributeName="d" values="m0,110 h0;m0,110 h1150;m0,110 h1150;m0,110 h0" dur="10s" begin="0s" repeatCount="indefinite"/>  
	</path>  
</svg>

3. Вертикальная анимация текста

Буквы анимируются вдоль вертикальной линии

<path id="path" marker-start="url(#Marker_left)" marker-end="url(#Marker_right)">
        <animate attributeName="d" values="m0,0 0,10;m0,0 0,500" dur="5s" begin="0s" repeatCount="indefinite"/>
    </path>


@import url(https://fonts.googleapis.com/css?family=Montserrat:700); 
body{ 
  margin:0; 
  width:100%;  
  height:100vh; 
  overflow:hidden; 
  background:hsla(0, 5%, 5%, 1); 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background-image: -webkit-linear-gradient(left bottom, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1)); 
  background-image: linear-gradient(to right top, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1)); 
} 
svg{ 
  width:100%; 
}
<svg width="100%" height="100%" viewBox="0 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
<defs>  
   <!--  Трасса вертикального движения букв от нуля до 400px --> 
 <path id="path" marker-start="url(#Marker_left)" marker-end="url(#Marker_right)"> 
		<animate attributeName="d" values="m0,0 0,10;m0,0 0,500" dur="5s" begin="0s" repeatCount="indefinite"/> 
	</path> 
 
</defs> 
<!--   анимация движения букв от нуля до 400px --> 
  
	<text font-size="32" font-family="Montserrat" fill='hsla(36, 95%, 85%, 1)'> 
		<textPath xlink:href="#path">This is a paragraph that is being typed by SVG. 
    </textPath> 
	</text>  
	 
</svg>

4. Движение букв вокруг шестиугольника 

.container { 
width:50%; 
height:50%; 
}
<div class="container"> 
<svg 	xmlns="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink" 
 viewBox="0 0 400 450"> 
<defs> 
 <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox"> 
      <stop stop-color="#406666" offset="0%"/> 
      <stop stop-color="#fcfcfc" offset="50%"/> 
      <stop stop-color="#507676" offset="100%"/> 
      <animate attributeName="x2" begin="start.click" dur="10s" values="0;0.25;0.5;0.75;1" repeatCount="1"/> 
    </linearGradient> 
<path id="path1" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5 
                    200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="none"/> 
   </defs> 
<rect x='0' y='0' width='400' height='450' fill='#DDDDDD' stroke='black'/> 
  <!-- Внутренний шестиугольник--> 
<polygon id="pol1" fill="url(#grad1)" stroke="#507676" stroke-width="1"  
            points="200,75  308,137.5 308,262.5 
                    200,325 92,262.5 92,137.5" /> 
<text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="700" font-size="24"> 
<textPath id="result" method="align" spacing="auto" startOffset="1%" xlink:href="#path1"> 
<tspan dy="-10"> Весь  длинный текст  вокруг шестиугольника</tspan> 
   <!-- Анимация букв--> 
<animate begin="start.click" dur="10s" repeatCount="1" attributeName="startOffset" values="4%;54%"/>  
</textPath> 
</text>  
 
  <!-- Кнопка Старт--> 
<g id="start" transform="translate(-270 -370)"> 
<rect  x="285" y="387" rx="10" width="90" height="35" style="fill:#507676;"/> 
<text x='300' y='412' fill="white" font-size="25">Старт</text>  
</g> 
     <!-- Внешний шестиугольник--> 
  <path id="path2" transform="scale(1.25) translate(-40 -40)" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5 
                    200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="#507676" stroke-width="1" stroke-opacity="1"/>  
</svg> 
</div>

Связанный ответ: Анимация печати текста

READ ALSO
Как выполнить setTimeout по очереди в JavaScript?
javascript

Как выполнить setTimeout по очереди в JavaScript?

Я только изучаю JS, Подскажите пожалуйста, как выполнить setTimeout по очереди в JavaScript ?

 227
Как выполить scroll при клике на меню? [дубликат]
javascript

Как выполить scroll при клике на меню? [дубликат]

Нужно реализовать прокрутку, при клике на определенный элемент меню с анимациейСкролл будет выполняться к выбраному блоку

 187
Префиксы css для flex
CSS

Префиксы css для flex

Вот код css

 268
Неправильная запись при сохранении QJson
c++

Неправильная запись при сохранении QJson

Не могу найти чего то подобного на просторах ИнетаПроблема в следующем: Читаю json файл, после просто сохраняю

 252