Как анимировать буквы в тексте с помощью css3?

Question

Я хотел бы анимировать небольшой текст, я хочу отображать буквы один за другим?

Есть ли способ сделать это с помощью CSS3?

Answer 1

попробовать это

http://www.hungry-media.com/code/jQuery/tickerType/

CSS3 не может сделать это самостоятельно, вам нужен некоторый скрипт, чтобы нарезать символы один за другим

Answer 2

Просто обернуть ваши письма в один тег, например span и оживить их. W3C specification имеет только first-letter псевдокласс.

Answer 3

Проверьте это ссылка для вашего решения:

http://goo.gl/5Laa43

http://codepen.io/rusjames/pen/uAFhE

Answer 4

Или это проверить ключевыми кадры анимации

@-webkit-keyframes typing { 
    from { width: 0 } 
    to { width:16.3em } 
} 

@-moz-keyframes typing { 
    from { width: 0 } 
    to { width:16.3em } 
} 

@-webkit-keyframes blink-caret { 
    from, to { border-color: transparent } 
    50% { border-color: black } 
} 

@-moz-keyframes blink-caret { 
    from, to { border-color: transparent } 
    50% { border-color: black } 
} 

body { font-family: Consolas, monospace; } 

h1 { 
    font-size:150%; 
    width:16.3em; 
    white-space:nowrap; 
    overflow:hidden; 
    border-right: .1em solid black; 

    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
         blink-caret 1s step-end infinite; 
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */ 
         blink-caret 1s step-end infinite; 
} 

Answer 5

http://letteringjs.com/ плагин для JQuery, который оборачивает каждую букву в промежутке tag для анимации, но сохраняет html в источнике. Хорошее решение, если вы уже используете jQuery, к сожалению, пока нет чистого решения для CSS.

Answer 6

Я использую textillate.js, который зависит от animate.css. Это очень легко начать с этих двух. Из них документы:

<h1 class="tlt">My Title</h1> 

И ваш JavaScript должен выглядеть следующим образом:

$(function() { 
    $('.tlt').textillate(); 
}) 

https://github.com/jschr/textillate https://github.com/daneden/animate.css

Answer 7

Если вам нужно только показать что-то по буквам, вам не нужно JQuery или Textillate или любой другой плагин. Просто скопируйте это.

<script type="text/javascript"> 
function printLetterByLetter(destination, message, speed){ 
    var i = 0; 
    var interval = setInterval(function(){ 
     document.getElementById(destination).innerHTML += message.charAt(i); 
     i++; 
     if (i > message.length){ 
      clearInterval(interval); 
     } 
    }, speed); 
} 

window.onload = function(){ 
    printLetterByLetter("someElement", "Hello world, bonjour le monde.", 100); 
} 
</script> 

Замените 'someElement' на идентификатор элемента html, где отображается текст. Замените «100» на любой другой номер. Здесь это означает, что новое письмо появляется каждые 100 миллисекунд.