Custom animation start on button click? HTML, CSS, JS [duplicate]

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 : google.com/… — Temani Afif
– Temani Afif, Commented May 2, 2018 at 8:52

Rory McCrossan · Accepted Answer · 2018-05-02 08:52:17Z

0

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>

answered May 2, 2018 at 8:52

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jens O. Anders Olsén Over a year ago

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.

Rory McCrossan Over a year ago

Are you running the jQuery code in a document.ready event handler?

Jens O. Anders Olsén Over a year ago

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.

Collectives™ on Stack Overflow

Custom animation start on button click? HTML, CSS, JS [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related