6

Нашел такой вариант создания анимации набора текста, но он почему-то работает только с текстовым абзацем.
Попробовал сделать тоже самое со 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>
0

3 ответа 3

7

Потому что тег 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>

4
  • Здравствуйте. Какой перенос? Текст однострочный. 9 окт 2019 в 9:31
  • @СергейПлотницкий когда Ширина блока в котором есть текст меньше чем ширина текста, браузер автоматически переносит его на следующую строку, но при условии что родитель имеет блочное представление т.е. display: block иначе перенос игнорируется и текст будет однострочным и будет выходить за рамки блока 9 окт 2019 в 9:34
  • @СергейПлотницкий собственно на ширине родителя и переносе основана данная анимация) 9 окт 2019 в 9:38
  • Хорошо, понял, спасибо большое. 9 окт 2019 в 9:45
6

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

можно добавить рандомный таймер в пределах от 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>

1
4

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>

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.