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/

正确使用动画来使用css3动画向上滑动文本

1 个答案: