正確使用動畫來使用css3動畫向上滑動文本

Question

我想創建動畫效果，其中每行文本在加載時滑動，只使用CSS。

這是正確的方法嗎？我覺得有更好的實施方式。我不喜歡我如何使用關鍵幀來改變填充和線條高度，以便在每個句子後都有滑動效果

感謝您的幫助！

HTML

<p class="slide-up"> 
    Here is the first sentence that should slide up 
  </br> 
  This is the second sentence that should slide up right after it with a delay 
</p> 

CSS

p { 
    font-family: helvetica; 
  font-size: 20px; 
  line-height: 25px; 
} 
     
@keyframes slide-up { 
    from { 
   padding-top: 100px; 
    opacity: .25; 
    line-height: 80px; 
  } 
  to { 
   padding-top: 0; 
    opacity: 1; 
    ine-height: 25px; 
  } 
} 
     
.slide-up { 
    animation: slide-up 1s; 
} 

JS FIDDLE：https://jsfiddle.net/91ypg7Ls/

Answer 1

雖然你的問題取決於自以爲是的答案，看看這個：

@keyframes slide-up { 
    from { 

     opacity: .25; 
     line-height: 500px; 
    } 
    to { 

     opacity: 1; 
     line-height: 25px; 
    } 
} 

https://jsfiddle.net/91ypg7Ls/2/