How can I give my hamburger menu animations?

I'd like to give my hamburger menu animations. I'd like to add the 'rollOut' animation when I click on the hamburger menu icon, and the 'zoomIn' animation when I click on a submenu item. I know that I need to replace the animation class names with an id name in my menu, I don't know which ones though?

Thanks!

$(document).ready(function() {
  $('.icon').on('click', function() {
    $("#menu").toggle();
  });
  $('#menu a').on('click', function() {
    $(this).siblings('.submenu').toggle();
  });
});

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;

}

.icon {
  width: 35px;
  margin: auto;
}

* {font-family: "Segoe UI", Tahoma;}
ul#menu > li {
  width: 100%;
  display: block;

}
ul#menu > li > ul.submenu {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul#menu a {
  display: block;
  text-decoration: none; 
  color: black; 
  padding: 5px; 
}

.submenu {

}


@keyframes rollOut {
from {
  opacity: 1;
}

to {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}

.rollOut{
-webkit-animation-name: rollOut;
animation-name: rollOut;
}

@keyframes zoomIn {
from {
  opacity: 0;
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
  transform: scale3d(0.3, 0.3, 0.3);
}

50% {
  opacity: 1;
}
}

.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Stefan's menu's - 2</title>
<link href="main.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="hamburger.js"></script>
</head>
<body>
<nav>
<div id="hamburger-menu">
  <div class="icon">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <ul id="menu">
    <li>
     <a href="#">Menu Button</a>
      <ul class="submenu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
      </ul>
    </li>
    <li>
     <a href="#">Menu Button</a>
      <ul class="submenu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
      </ul>
    </li>
  </ul>
</div>
</nav>
</body>
</html>

Solution

You need an animation-duration property for your animations.
You can change the animation-duration form 4 second if you want to.

$(document).ready(function() {
  $('.icon').on('click', function() {
    $("#menu").toggle();
  });
  $('#menu a').on('click', function() {
    $(this).siblings('.submenu').toggle();
  });
});

      .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;

}

.icon {
    width: 35px;
    margin: auto;
}

* {font-family: "Segoe UI", Tahoma;}
ul#menu > li {
    width: 100%;
    display: block;

}
ul#menu > li > ul.submenu {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul#menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

ul#menu a {
    display: block;
    text-decoration: none; 
    color: black; 
    padding: 5px; 
}

.submenu {

}


@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut{
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
   -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
      <title>Stefan's menu's - 2</title>
      <link href="main.css" type="text/css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
    <body>
      <nav>
        <div id="hamburger-menu">
          <div class="icon">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
          </div>
          <ul id="menu">
            <li class="rollOut">
             <a href="#">Menu Button</a>
              <ul class="submenu zoomIn">
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
              </ul>
            </li>
            <li class="rollOut">
             <a href="#">Menu Button</a>
              <ul class="submenu zoomIn">
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </body>
    </html>