CSS动画一次一行答案

【问题标题】：CSS Animate One Line at a TimeCSS动画一次一行
【发布时间】：2018-01-16 00:49:33
【问题描述】：

更新：仍然无法解决这个问题，如果有人能提供帮助，我会很高兴，因为我目前无能为力！

我有一个当前设置为一次全部动画的类，但我试图让它一次走一行，尽管段落中的中断会根据窗口的宽度和内容如果改变。目前定位的段落类是这样的：

<p class="animated">ANIMATE THIS TEXT ONE LINE AT A TIME</p>

但取决于窗口宽度将呈现为这样，或其他可能的变化取决于休息决定去哪里：

ANIMATE THIS
TEXT ONE LINE
AT A TIME

我见过一些其他的例子，比如this，它把文本分成多个段落标签，让它们一个接一个地制作动画，但是因为我不能总是预测它会在哪里中断，所以我没能做到找到解决办法。

这是我目前正在使用的：

.animated{
opacity:1;
-webkit-animation-name: flip;
-webkit-animation-duration: 0.15s;
-webkit-animation-iteration-count: 3;
-webkit-animation-direction: alternate;
}

@keyframes flip {
0%, 50%   {transform:rotateY(180deg);}
50.1%, 100%  {transform:rotateY(0deg);}
}

希望有人给出答案！

谢谢

【问题讨论】：

你可以做的是，使用属性animation-delay设置不同的类，并在你想要显示的文本的哪一行使用它们
不确定是否可以使用jQuery，如果可以，这可能会有所帮助jsfiddle.net/nathan/qkmse
嗯，我还没有完全明白，但也许这会有所帮助。我唯一遇到的问题是第一行，看看我制作的这个小提琴，看看它是否适合你jsfiddle.net/e81anjfw/1
@CumminUp07 哇，这真是太棒了！我试图将它实现到我的 Wordpress header.php （目标在哪里），但似乎没有得到任何结果：/

标签： jquery html css animation

【解决方案1】：

我不确定我是否理解正确，但万一我理解了... .这是工作小提琴：https://jsfiddle.net/0n5dnqau/4/

我希望 HTML 看起来类似于：

<p class="par hid">
    Lorem ipsum dolor sit amet, populo feugiat legimus vix eu, propriae  
    ...
</p>

然后我们会像这样运行脚本：

var p = $('.par');
var animator = $('<span class="anim"></span>');
var hidden = $('<span class="hid"></span>')
var textLength = p.text().length;
var offset = 0;

function animate(letter_position) {
    var text = p.text();
    p.text('');
    var textBefore = text.substring(0, letter_position - 1);
    var textAfter = text.substring(letter_position, textLength);
    var letter = text.substr(letter_position - 1, 1);
    animator.text(letter);
    hidden.text(textAfter);
    p.append(textBefore);
    p.append(animator);
    p.append(hidden);
}

var interval = setInterval(function(){
    if (p.hasClass('hid')) p.removeClass('hid');
    if (offset - 2 === textLength) {
        clearInterval(interval);
        p.children('.anim').remove();
        p.children('.hid').remove();
        return;
    } 
    animate(offset);
    offset++;
}, 100);

CSS 非常简单：

.anim {
    animation: show .01s ease-in-out;
}

@keyframes show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.hid {
    opacity: 0;
}

它实际上将文本拆分为 3 个部分。 beforeText 被添加到没有任何样式的段落中，它只是普通段落的文本。然后animator 是要被动画化的字母，hidden 部分将被隐藏（我猜这并不奇怪）。然后我们按照确切的顺序在段落中添加这 3 个部分。

您可以使用 setInterval 中的动画效果和长度以及间隔，以使其更有可能实现您想要实现的动画。

【讨论】：