Question

更新：仍然没有能够解决这个问题，如果有人可以提供帮助，我会很高兴，因为我目前的智慧已经结束！

我有一个课程目前设置为一次动画，但我试图让它一次一行，虽然段落中的断点会不断变化，具体取决于窗口和内容如果更改。目前，目标的段落类是：

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

希望有人有答案！

谢谢

Answer 1

我不确定我是否理解正确，但是如果我这样做了......我想出了一个字母动画的想法，如果它正确实现的话，它实际上看起来像是整个文本的动画。这是工作小提琴：DOCS

我希望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的间隔，使其更有可能成为您想要实现的动画。

CSS一次动画一行

1 个答案: