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

#javascript #css #svg #css_animation #svg_animation

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

 
This is a paragraph that is being typed by CSS animation.

    

Ответы

Ответ 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;
  }
}
This is a paragraph that is being typed by CSS animation.


Ответ 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;
  }
}
Lorem ipsum dolor sit.


Ответ 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%;
}





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

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


 
 
   
 



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



@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%;
}





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

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


        
    




@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%;
}





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



.container {
width:50%;
height:50%;
}







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