javascript - 使用 开始动画到动画所在的部分？

Question

是否可以开始一个像 slideInLeft 这样的动画，并带有指向动画发生的部分的链接？

这是一个简单的 slideInLeft 动画，所以我认为它不会那么难，但我想不通。

我已经找了一段时间了，但找不到我需要的东西。

<style>
@-webkit-keyframes slideInLeft {
  from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
}

to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}

@keyframes slideInLeft {
  from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
}

to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
</style>

<a class="center" id="ClickHere" onClick="makeAnimation();" href="#WelcomePage"> <br> Click or Scroll Down <br> For More </a>

<div class="parallax animated " id="Animation">  </div>

<script>
function makeAnimation() {
var myAnimationOnclick = document.getElementById("animated").classList;

myAnimationOnclick.add("slideInLeft");
}
</script>

Answer 1

请试试这个。我在您的 CSS 中添加了动画持续时间。

@-webkit-keyframes slideInLeft {
  from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
}

to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}

@keyframes slideInLeft {
  from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
}

to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
      -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-duration: 2s;

}

<script>
  function makeAnimation() {
  document.getElementById("Animation").classList.add('slideInLeft');
}
</script>
<a class="center" id="ClickHere" href="#WelcomePage" onclick="makeAnimation()"> <br> Click or Scroll Down <br> For More </a>

<div class="" id="Animation"> test div </div>