Javascript 自定义动画开始于按钮单击？HTML、CSS、JS

现在，当我按下一个按钮时，我正在尝试向div添加动画。 但是，我不确定如何使用JavaScript或jQuery在单击按钮时触发自定义动画。到目前为止，我还没有为此编写任何JavaScript

我对这个很陌生，所以我问了专业人士的问题

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动画，可以将CSS规则放入它们自己的类中。单击按钮后，可以将该类应用于所需的元素，如下所示：

$（函数（）{
$（“按钮”）。单击（函数（）{
$（'#frontPage'）.addClass（'slideOutletft'）；
});
});
#首页{
文本对齐：居中；
边缘顶部：80px；
位置：相对位置；
宽度：500px；
}
.滑出{
动画：向前滑动1s；
}
@关键帧向外滑动{
0% {
左：0；
}
100% {
左：-1500px；
}
}

点击我
关于
这里有些东西
应用
您可以进行一点搜索，您会得到它：由于某些原因，动画不会被触发。我尝试在单击按钮时调试并登录控制台，但它似乎没有响应。您是否在document.ready事件处理程序中运行jQuery代码？现在动画类已添加到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;}

}