为垂直文本滚动添加动态透明度（不透明度）

Question

这是我正在使用的 css：

figure p {
opacity:0;
}

figure:hover p {
 opacity:1;
 -webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateY(100%);
 -webkit-transform:translateY(100%);    
 transform:translateY(100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-up 5s linear infinite;
 -webkit-animation: scroll-up 5s linear infinite;
 animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
 0%   { -moz-transform: translateY(100%); }
 100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
 0%   { -webkit-transform: translateY(100%); }
 100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
 0%   { 
 -moz-transform: translateY(100%); /* Browser bug fix */
 -webkit-transform: translateY(100%); /* Browser bug fix */
 transform: translateY(100%);       
 }
 100% { 
 -moz-transform: translateY(-100%); /* Browser bug fix */
 -webkit-transform: translateY(-100%); /* Browser bug fix */
 transform: translateY(-100%); 
 }
}

它可以很好地向上滚动文本，但我不知道如何进行渐变的不透明度过渡。从上面的代码可以看出，我尝试将其添加到悬停样式中：

 opacity:1;
 -webkit-transition: opacity 0.35s;
transition: opacity 0.35s;

页面上的结果样式不是我所期望的。文字突然出现。这是一个无赖，因为我真正追求的是动态不透明度。换句话说，文本越高，它应该变得越透明。一旦它到达垂直滚动的最高点（文本从下到上滚动），它将是 100% 透明的（也就是 0 不透明度）。所以我有点担心，因为正如我上面所说，我什至无法让一个简单的不透明度过渡工作。

问题：考虑到我目前的垂直滚动样式，有没有办法实现这种样式？

Answer 1

试试这个

p {
  opacity: 0;
}

.figure:hover p {
  margin: 0;
  line-height: 50px;
  text-align: center;
  /* Starting position */
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  /* Apply animation to this element */
  -moz-animation: scroll-up 8s linear infinite;
  -webkit-animation: scroll-up 8s linear infinite;
  animation: scroll-up 8s linear infinite;
}


/* Move it (define the animation) */

@-moz-keyframes scroll-up {
  0% {
    -moz-transform: translateY(100%);
    opacity: 0;
  }
  50%,60%{
    opacity: 1;
  }
  100% {
    -moz-transform: translateY(-100%);
    opacity: 0;
  }
}

@-webkit-keyframes scroll-up {
  0% {
    -webkit-transform: translateYsa(100%);
    opacity: 0;
  }
  50%,60%{
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes scroll-up {
  0% {
    -moz-transform: translateY(100%);
    /* Browser bug fix */
    -webkit-transform: translateY(100%);
    /* Browser bug fix */
    transform: translateY(100%);
    opacity: 0;
  }
  50%,60%{
    opacity: 1;
  }
  100% {
    -moz-transform: translateY(-100%);
    /* Browser bug fix */
    -webkit-transform: translateY(-100%);
    /* Browser bug fix */
    transform: translateY(-100%);
    opacity: 0;
  }
}

<div class="figure">
  Hover here
  <br>
  <br>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>