CSS 动画为单词创建空间答案

【问题标题】：CSS animation create space for wordCSS 动画为单词创建空间
【发布时间】：2020-03-30 01:57:31
【问题描述】：

我试图做一个改变单词的动画。我设法做到了。我的问题是这整个句子应该是一行。现在它分成两条线。我怎样才能设法将它放在一行中？

we 和 solutions 之间的间距应该会根据单词的变化自动调整。

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; }
}

【问题讨论】：

显示：弹性；在 .sliding-statement h1{...} 类中
它带来了同一行。但不会为滑动字创造空间。所以滑动词与最后一个词重叠。请参阅代码笔。
只是为了向您展示我添加的答案，这是一行，但另一行 transition 文本移动到下一行，因为在 nth-child() 上您所写的内容。（查看完整的输出屏幕）。

标签： css css-animations

【解决方案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>

【讨论】：