CSS3-文字双屏进入效果

CSS3-文字双屏进入效果

html:

<section>
<span class="sliding single-sliding">
<i>只争朝夕,</i>
<i>不负韶华,</i>
<i>不忘初心,</i>
<i>砥砺前行</i>
</span>
<div class="wrapper">
<span class="sliding">
<i>只争朝夕,</i>
<i>不负韶华,</i>
<i>不忘初心,</i>
<i>砥砺前行</i>
</span>
</div>
</section>

css:

*{
margin: 0;
padding: 0;
list-style: none;
font-style: normal;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
section{
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: #eaffae;
position: absolute;
}
.wrapper{
width: 50%;
height: 100%;
background-color: #f55757;
color: #eaffae;
position: absolute;
top: 0;
left: 0;
border-right: 2px solid #ddd;
overflow: hidden;
}
.sliding{
position: absolute;
top: 50%;
transform: translate(0,-50%);
/* 规定段落中的文本不进行换行 */
white-space: nowrap;
font-size: 12em;
line-height: 220px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
animation: animate-sliding 20s linear infinite;
}
.single-sliding{
color: #f55757;
}
@keyframes animate-sliding{
0%{
transform: translate(0,-50%);
}
100%{
transform: translate(-50%,-50%);
}
}

说明：文字水平方向，向左平行移动。

最终产生的动态效果，如下所示：