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>
Связанный ответ: Анимация печати текста