Custom animation start on button click? HTML, CSS, JS

Question

Right now I'm trying to add an animation to a div when I press a button. However, I'm not sure on how to trigger a custom animation on button click with JavaScript or jQuery. As of now I do not have any JavaScript written for this.

Im very new to this, hence me asking the pro's!

HTML:

<div class="container" id="frontPage">
        <div "container">
            <h1 class="header center green-text">ABOUT</h1>
            <div class="row center">

                <p class="header col s12 light">Something here</p>

            </div>        
        </div>
        <div class="row center padding-bottom-1">
            <a a href="{{ url('/loginpage') }}" class="btn-small green" id="loginButton">login</a>
            <a class="btn-small green">apply</a>
        </div>
    </div>

CSS:

#frontPage {
  text-align: center;
  margin-top: 80px;
  position: relative;
  animation-name: slideOutLeft;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  width: 500px;
}

@keyframes slideOutLeft {
  0% {left: 0;}
  100% {left: -1500px;}

}

you may do a little search and you will get it : https://www.google.com/search?q=run+animation+using+js+site:stackoverflow.com&sa=X&ved=0ahUKEwj8zar80ubaAhXJCuwKHdlYCNoQrQIIYigEMAM&biw=1600&bih=794 — Temani Afif, May 02 '18 at 08:52

score 0 · Answer 1 · answered May 02 '18 at 08:52

To trigger a CSS animation on a button click you can put the CSS rules in their own class. You can then apply that class to the required elements when your button is clicked, like this:

$(function() {
  $('button').click(function() {
    $('#frontPage').addClass('slideOutLeft');
  });
});

#frontPage {
  text-align: center;
  margin-top: 80px;
  position: relative;
  width: 500px;
}

.slideOutLeft {
  animation: slideOutLeft 1s forwards;
}

@keyframes slideOutLeft {
  0% {
    left: 0;
  }
  100% {
    left: -1500px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<div class="container" id="frontPage">
  <div id="container">
    <h1 class="header center green-text">ABOUT</h1>
    <div class="row center">
      <p class="header col s12 light">Something here</p>
    </div>
  </div>
  <div class="row center padding-bottom-1">
    <a a href="#" class="btn-small green" id="loginButton">login</a>
    <a class="btn-small green">apply</a>
  </div>
</div>

For some reason the animation doesn't get triggered. I tried to debug and log in the console on button click but it doesn't seem to respond. — Jens O. Anders Olsén, May 02 '18 at 09:31
Are you running the jQuery code in a document.ready event handler? — Rory McCrossan, May 02 '18 at 09:32
Now the animation class is added to the div, but the animation doesn't run... any ideas what might cause this? I used your code above for the css. — Jens O. Anders Olsén, May 02 '18 at 11:27

Custom animation start on button click? HTML, CSS, JS

1 Answers1