CSS / JS：在滚动上为垂直线设置动画

Question

我正在尝试在此网站上滚动一行（h3：之前）： https://www.fhoke.com/

.line {
  display : table;
  transition: opacity ease 0.4s;
}

.line:before {
  content: "";
  position: relative;
  display: table-cell;
  width: 0.10rem;
  height: 114px;
  top: 5px;
  text-align: center;
  background-color: black;
  transition: height ease 0.4s 0.1s;
}

<div class="line">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor lectus nec imperdiet volutpat. Curabitur in pharetra purus. Nunc a tortor eros.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor lectus nec imperdiet volutpat. Curabitur in pharetra purus. Nunc a tortor eros.</p>
</div>

但它不起作用。