从线上滑动动画

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>

​