animate two text one by one from bottom to top

Question

I am trying to animate two text one by one. For that I tried below code. but It's not displaying accurate as my sample. like one will cut another will display.

I need help now.

@-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>

one problem is that text should crop when it will slide up. But I tried with opacity. Not find solution How to crop text with slide up. like this

Answer 1

You can do something like this by making multiple keyframes in animation.

@-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>

With adding an extra delay in hidden state

@-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>

UPDATE : For adding scrolling effect you can use CSS tansform property with translateY and a parent having 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>