CSS动画为单词创建空间

Question

我试着做一个改变单词的动画。我已经做到了。我的问题是这整句话应该是一行。现在它正在分成两行。我怎样才能把它放在一行？

we和解决方案之间的空间应该根据单词的变化进行自动调整。

https://codepen.io/thaha-wahid/pen/abOXvbx

<div class="sliding-statement">
<h1 class="sliding-sentence">
We are engineers, We
<div class="slidingVertical">
<span>Create</span>
<span>Build</span>
<span>Develop</span>
</div>
Solutions
</h1>
</div>

.sliding-statement h1{
font-size: 48px;
margin-bottom: 20px;
padding-bottom: 0;
color: #001b35;
font-weight: bolder;
}
.slidingVertical span{
animation: topToBottom 7.5s linear infinite 0s;
-ms-animation: topToBottom 7.5s linear infinite 0s;
-webkit-animation: topToBottom 7.5s linear infinite 0s;
color: #ffffff;
font-weight: bolder;
opacity: 0;
overflow: hidden;
position: absolute;
background-color: #1ff8dc;
padding: 0px 7px;
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
/*topToBottom Animation*/
@-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}

Answer 1

位置绝对样式采用DOM元素，不占用行中的任何空间。因此，您可以使用父div根据子元素动画设置宽度，或者将父宽度设置为恒定宽度。https://codepen.io/rohinikumar4073/pen/bGdzVOj

body {
background-color: #a3d5d3;
}
.slidingVertical {
display: inline-block;
width: 170px;
display: inline-block;
height: 44px;
animation: changeWidth 7.5s infinite;
}
@keyframes changeWidth {
0%,
32% {
width: 150px;
}
33%,
66% {
width: 120px;
}
67%,
100% {
width: 180px;
}
}
.sliding-statement h1 {
font-size: 48px;
margin-bottom: 20px;
padding-bottom: 0;
color: #001b35;
font-weight: bolder;
}
.slidingVertical span {
animation: topToBottom 7.5s linear infinite 0s;
-ms-animation: topToBottom 7.5s linear infinite 0s;
-webkit-animation: topToBottom 7.5s linear infinite 0s;
color: #ffffff;
font-weight: bolder;
opacity: 0;
overflow: hidden;
position: absolute;
background-color: #1ff8dc;
padding: 0px 7px;
display: flex;
}
.slidingVertical span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
/*topToBottom Animation*/
@-moz-keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: translateY(-50px);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(50px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: translateY(-50px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(50px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: translateY(-50px);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(50px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}

<div class="sliding-statement">
<h1 class="sliding-sentence">
We are engineers, We
<div class="slidingVertical">
<span>Create</span>
<span>Build</span>
<span>Develop</span>
</div>
Solutions
</h1>
</div>