CSS一次動畫一條線

更新：仍然無法解決這個問題，如果有人可以幫助，因爲我目前處於危險之中！CSS一次動畫一條線

我有一個類當前設置爲一次動畫，但我試圖讓它一次走一條線，雖然段落中的斷點將不斷變化，取決於窗口的寬度並且內容如果改變。目前，該所針對的段落類是這樣的：

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

希望有人有答案！

感謝

來源

2017-08-08 Sam

你可以做的是，用屬性'animation-delay'設置不同的類，並在你想要顯示的文本行中使用它們 –

不確定是否可以使用jQuery，如果可以的話，這可能有助於http ：//jsfiddle.net/nathan/qkmse/ – Gerard

嗯，我還沒有明白，但也許這可以幫助。我遇到的唯一問題是第一行，看看我做的小提琴，看看它是否適用於你https://jsfiddle.net/e81anjfw/1/ – CumminUp07

我不知道如果我理解正確的你，但萬一我沒有...我出來的想法動畫由字母文字的信箋，實際上看起來像的動畫如果正確實施，則爲全文。這裏的工作小提琴：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部分將被隱藏（我猜測這並不奇怪）。然後我們按照確切的順序將這三個部分添加到這個段落中。

您可以使用setInterval中的動畫效果和長度以及間隔進行遊戲，以使其更有可能成爲您想要實現的動畫。

來源

2017-08-14 05:54:51

CSS一次動畫一條線

回答

相關問題