这是我的代码在 codepen 上的样子（忽略损坏的图像）：
https://codepen.io/kornstalk/pen/ZEqXrgq
我的问题是，每当代码在浏览器上运行时，图标上的动画就会中断 - 菜单功能正常（忽略样式，我稍后会对其进行调整）。这是我第一次尝试将 JS 与 HTMl 和 CSS 一起使用，我得到的错误似乎是图标未定义
这是我的完整 HTML 代码：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Rlayout</title>
<meta name="description" content="This site will serve as the hub for many sub responsive
layouts">
<meta name="viewport" content="width=device-width, initial- scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Fonts-->
<!--Providence Sans-->
<link rel="stylesheet" href="https://use.typekit.net/xzx3vba.css">
</head>
<body>
<!-- Place your site's HTML here -->
<header class="header">
<img class="logo" src="img/giz2.jpg" alt="This is our company logo">
<nav class="main-nav">
<a href="">About</a>
<span> | </span>
<a href="">Contact</a>
<span> | </span>
<a href="">Work</a>
</nav>
<div class="mobile-nav-wrapper">
<a href="javascript:void(0);" class="icon" data= "hamburger-menu" onclick="myFunction()">
<span></span>
<span></span>
<span></span>
</a>
<nav id="myLinks" class="mobile-main-nav">
<a href="">Work <span></span></a>
<a href="">About</a>
<a href="">Contact</a>
</nav>
</div>
</header>
<footer>
<p>© 2500</p>
<div>
<img src="./img/giz2.jpg" alt="">
<img src="./img/giz2.jpg" alt="">
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
我试过使用下面的代码，没有错误，但不会动画：
var Icon = document.querySelector(".icon");
var Icon1 = document.querySelector(".icon span:nth-child(1)");
var Icon2 = document.querySelector(".icon span:nth-child(2)");
var Icon3 = document.querySelector(".icon span:nth-child(3)");
任何帮助将不胜感激！！！
如评论所述，请查看浏览器日志并查看它给您的错误。
我会假设你忘记了添加对
velocity.js尝试在您的 HTML 中添加以下内容并再次测试：
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
编辑： 也许你甚至忘记了包括
jQuery$