CSS анимация создает пространство для слова

Question

Я пытался сделать анимацию смены слов. Мне удалось это сделать. Моя проблема в том, что все это предложение должно состоять из одной строки. Теперь он разбивается на две строки. Как мне получить его в одну строку?

Пробел между мы и решениями должен автоматически настраиваться в зависимости от меняющегося слова.

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>