从底部到顶部一个接一个地动画两个文本

Question

我正尝试一个动画两个文本。 为此，我尝试下面的代码。但是它的显示不准确。就像一个会切成另一个。

我现在需要帮助。

python generateDS.py -o lib_test.py  shipporder.xsd

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

一个问题是，文本在向上滑动时应会裁剪。但是我尝试了不透明性。找不到解决方案如何向上滑动文本。像这样

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>