анимировать два текста один за другим снизу вверх

Question

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

Мне нужна помощь сейчас.

@-webkit-keyframes fade-in{
    from{
        opacity:1;
        top:0px;
    }
    to{
        opacity:0;
        top:-50px;
    }
}
.text-animated-one{
      display: inline;
    position: relative;
    top: 0px;
    -webkit-animation: fade-in 1.5s infinite;
    float: left;
    text-align: center;
    margin: 0 auto;
    width: 100%;
     

}
.text-animated-two{
       opacity: 0;
    display: inline;
    position: relative;
    margin-left: -56px;
    -webkit-animation: fade-in 1.5s infinite;
    -webkit-animation-delay: 1.7s;
    float: left;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.aggettivi{
        display: inline;
    font-size: 6vw;
    text-align: center;
    margin: 0 auto;
    color:white;
}
.container {
    background: #E20816;
    width: 100%;
    float: left;
    margin: 0 auto;
    text-align: center;
}

<div class="container">

    
    <div class="aggettivi">
        <div class="text-animated-one">「いつもキレイ」を</div>    
        <div class="text-animated-two">「私らしく」選べる。</div>
    </div>


</div>

Одна проблема заключается в том, что текст должен обрезаться, когда он будет скользить вверх.Но я попробовал с непрозрачностью.Не найти решение Как обрезать текст с помощью слайда вверх.как это

Answer 1

Вы можете сделать что-то подобное, сделав несколько ключевых кадров в анимации.

@-webkit-keyframes fade-in {
  0%{
    opacity: 0;
    top: 50px;
  }
  30%,
  70% {
    opacity: 1;
    top: 0px;
  }
  100% {
    opacity: 0;
    top: -50px;
  }
}

.text-animated-one {
  display: inline;
  position: relative;
  top: 0px;
  -webkit-animation: fade-in 3s infinite;
  float: left;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.text-animated-two {
  opacity: 0;
  display: inline;
  position: relative;
  margin-left: -56px;
  -webkit-animation: fade-in 3s infinite;
  -webkit-animation-delay: .5s;
  float: left;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.aggettivi {
  display: inline;
  font-size: 6vw;
  text-align: center;
  margin: 0 auto;
  color: white;
}

.container {
  background: #E20816;
  width: 100%;
  float: left;
  margin: 0 auto;
  text-align: center;
}

<div class="container">


  <div class="aggettivi">
    <div class="text-animated-one">「いつもキレイ」を</div>
    <div class="text-animated-two">「私らしく」選べる。</div>
  </div>


</div>

С добавлением дополнительной задержки в скрытом состоянии

@-webkit-keyframes fade-in {
  0%,20% {
    opacity: 0;
    top: 50px;
  }
  30%,
  70% {
    opacity: 1;
    top: 0px;
  }
   80%,100% {
    opacity: 0;
    top: -50px;
  }
}

.text-animated-one {
  display: inline;
  position: relative;
  top: 0px;
  -webkit-animation: fade-in 3s infinite;
  float: left;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.text-animated-two {
  opacity: 0;
  display: inline;
  position: relative;
  margin-left: -56px;
  -webkit-animation: fade-in 3s infinite;
  -webkit-animation-delay: .5s;
  float: left;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.aggettivi {
  display: inline;
  font-size: 6vw;
  text-align: center;
  margin: 0 auto;
  color: white;
}

.container {
  background: #E20816;
  width: 100%;
  float: left;
  margin: 0 auto;
  text-align: center;
}

<div class="container">


  <div class="aggettivi">
    <div class="text-animated-one">「いつもキレイ」を</div>
    <div class="text-animated-two">「私らしく」選べる。</div>
  </div>


</div>

ОБНОВЛЕНИЕ: Для добавления эффекта прокрутки вы можете использовать свойство CSS tansform с translateY и родительский элемент с overflow: hidden;.

@-webkit-keyframes fade-in {
  0%,
  20% {
    transform: translateY(100%);
  }
  30%,
  70% {
    transform: translateY(0);
  }
  80%,
  100% {
    transform: translateY(-100%);
  }
}

.text {
  overflow: hidden;
  margin: 10px 0;
}

.text-animated-one {
  display: inline;
  position: relative;
  top: 0px;
  -webkit-animation: fade-in 4.5s infinite;
  float: left;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.text-animated-two {
  display: inline;
  position: relative;
  margin-left: -56px;
  -webkit-animation: fade-in 4.5s infinite;
  -webkit-animation-delay: 750ms;
  float: left;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  transform: translateY(50px);
}

.aggettivi {
  display: inline;
  font-size: 6vw;
  text-align: center;
  margin: 0 auto;
  color: white;
}

.container {
  background: #E20816;
  width: 100%;
  float: left;
  margin: 0 auto;
  text-align: center;
}

<div class="container">


  <div class="aggettivi">
    <div class="text">
      <div class="text-animated-one">「いつもキレイ」を</div>
    </div>
    <div class="text">
      <div class="text-animated-two">「私らしく」選べる。</div>
    </div>
  </div>


</div>