如何使用css3为文本中的字母设置动画？答案

【问题标题】：How to animate letters in text using css3?如何使用css3为文本中的字母设置动画？
【发布时间】：2013-11-18 09:03:34
【问题描述】：

我想为小文本制作动画，我想一个一个地显示字母？

有没有办法使用 CSS3 来做到这一点？

【问题讨论】：

check this out
我认为你必须按跨度拆分字母并控制它

标签： javascript jquery css animation

【解决方案1】：

只需将您的字母包装在一个标签中，例如span 并为它们制作动画。 W3C specification 只有 first-letter 伪类。

【讨论】：

是的，使用 javascript 或更好的 jQuery 插件（插件链接见其他帖子）
@user1834809，确实 css3 还不能将伪类应用于给定的字母第 nth-child 行。确实，现在您必须包装字母并将动画应用于包装器。 codepen.io/FWeinb/pen/djuIx 这是第 n 个字母的插件。然后，您可以将 css 中的动画应用于单词中的任何给定字母。

【解决方案2】：

或者检查这个关键帧动画

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

【讨论】：

【解决方案3】：

http://letteringjs.com/ 是一个 jQuery 插件，它将每个字母包装在一个 span 标签中以进行动画处理，但保持源代码中的 html 干净。如果您已经在使用 jQuery，这是一个很好的解决方案，不幸的是，目前还没有纯 CSS 解决方案。

【讨论】：

【解决方案4】：

我使用依赖于 animate.css 的 textillate.js。开始使用这两个非常容易。从他们的文档中：

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

您的 JavaScript 应该如下所示：

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

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

【讨论】：

【解决方案5】：

如果你只需要一个字母一个字母的显示，你不需要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>

用显示文本的 html 元素的 id 替换“someElement”。用任何其他数字替换“100”。这意味着每 100 毫秒出现一个新字母。

【讨论】：

【解决方案6】：

试试这个

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

Css3 不能自己做，你需要一些脚本来一个一个地分割字符

【讨论】：

@user1834809 我分享的链接使用的是css，但是css本身并不能解决你的需求。您需要一些脚本来使文本动态化