从下到上一个一个地动画两个文本

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>

从下到上一个一个地动画两个文本

animate two text one by one from bottom to top

javascript

css

animation

transactions

jquery-animate