start an animation with an to the section where the animation is?

Question

Is it possible to start an animation like slideInLeft with a link to the section where the animation is happening?

It is a simple slideInLeft animation, so I thought it wouldn't be so hard, but I cant figure it out.

I've been looking for a while but I can't find the things I need.

<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>

Possible duplicate of [CSS 3 slide-in from left transition](https://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition) — Randy Casburn, Feb 25 '18 at 01:39

score 0 · Accepted Answer · answered Feb 25 '18 at 03:11

Please try this. I added animation-duration to your 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>

start an animation with an to the section where the animation is?

1 Answers1