当页面部分用 jQuery 可见时触发图像动画

Question

我有一个链接按钮，可以链接到我页面的某个部分。单击它或滚动到页面的该部分时，我想向fadeInUpAnimation下面的 img 元素添加一个类。图像开始时的不透明度应该为 0——我想我可以在添加动画类之前将不透明度设置为 0。

<img src="img/circle-portrait-small.png" class="portrait">

这是动画：

@keyframes fadeInUp {

  from {

    /* x, y axis */

    transform: translate(0, 80px);

    opacity: 0;

  }

  to {

    transform: translate(0, 0);

    opacity: 1

  }

}

.fadeInUpAnimation {

  animation-duration: 1.5s;

  animation-name: fadeInUp;

}

我更喜欢 jQuery 方法，因为我已经有了一个 jQuery 文件，但这不是必需的。

有什么建议？