正确使用动画来使用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/