从线向上滑动动画

Question

使文本从行上滑出动画的最佳方法是什么？ 基本上，我试图让顶部文本从行向上滑动，底部文本从行向下滑动，如果它们隐藏在我想的行内。

Answer 1

你可以看看动画和变换

 p { margin: 0; height: 2em; overflow: hidden; width: max-content; margin: 0 auto; background: linear-gradient( currentcolor,currentcolor) center 85%/ 80% 2px no-repeat } p+p { background: none; } p span { display: inline-block; transform: translatey(4em); animation: slide 0.5s forwards; } p+p span { transform: translatey(-4em); } @keyframes slide { to { transform: translatey(0em) } } /* demo */ body { background:#333; color: #eee; margin:0; min-height:100vh; display:flex; flex-direction:column; font-size:3vw; justify-content:center; } }

 <p><span>Some text here to slide up</span></p> <p><span>Some text here to slide down</span></p>