嘿，作为前端新手遇到这种问题太正常啦！我来一步步帮你搞定按钮触发div动画的事儿～首先先帮你修正下HTML里的小语法错误，再给你两种实现方案，你可以选自己顺手的来。

第一步：修正并完善HTML #

你的原HTML里有个小问题：<div "container">少了class=属性，我帮你修正了，还加了一个触发动画的按钮：

<div class="container" id="frontPage">
  <div class="container"> <!-- 修正了class属性缺失的问题 -->
    <h1 class="header center green-text">ABOUT</h1>
    <div class="row center">
      <p class="header col s12 light">Something here...</p>
    </div>
  </div>
</div>
<!-- 新增触发动画的按钮 -->
<button id="animateBtn">点击触发动画</button>

第二步：定义自定义动画（CSS） #

先写一个简单的淡入缩放动画，你可以完全按照自己的需求修改动画效果（比如移动、旋转、变色都可以）：

/* 自定义动画关键帧，你可以修改这里的属性实现不同效果 */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 动画触发类：添加这个类就会执行上面的动画 */
.animated {
  animation: fadeInScale 0.6s ease-out forwards;
  /* forwards表示动画结束后保持最后一帧的状态 */
}

方案一：原生JavaScript实现（无需额外库） #

原生JS完全可以搞定，逻辑很清晰，适合新手理解：

// 获取按钮和要动画的div元素
const animateBtn = document.getElementById('animateBtn');
const targetDiv = document.getElementById('frontPage');

// 给按钮绑定点击事件
animateBtn.addEventListener('click', function() {
  // 先移除动画类（防止重复点击时动画不触发）
  targetDiv.classList.remove('animated');
  // 强制浏览器重绘这一步很关键，不然直接加类可能没效果
  void targetDiv.offsetWidth;
  // 添加动画类，触发动画
  targetDiv.classList.add('animated');
});

小解释： #

为什么要先移除再加类？因为如果元素已经有animated类了，重复添加不会重新触发动画，所以先移除，再强制浏览器重绘（void targetDiv.offsetWidth这行），最后再添加类，这样每次点击都能触发动画。

方案二：jQuery实现（更简洁） #

如果你已经引入了jQuery库，用这个方法会更省事：

// 给按钮绑定点击事件
$('#animateBtn').click(function() {
  // 先移除动画类，用stop()防止多次点击导致动画排队
  $('#frontPage').removeClass('animated').stop().addClass('animated');
  
  // 可选：动画结束后自动移除类，方便下次触发（时间要和动画时长一致）
  setTimeout(() => {
    $('#frontPage').removeClass('animated');
  }, 600);
});

小提示： #

• 如果你还没引入jQuery，需要在HTML里加一行引入代码（放在</body>前就行）：<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
• 你可以完全自定义CSS里的@keyframes，比如改成从左滑入、旋转360度、背景色变化等等，只要调整关键帧里的CSS属性就好。

内容的提问来源于stack exchange，提问作者Jens O. Anders Olsén