CSS-animated icons with Hamburgers

<div class="hamburger hamburger--3dx">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--3dx</code>

  <br>

  <div class="hamburger hamburger--3dx-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--3dx-r</code>

  <br>

  <div class="hamburger hamburger--3dy">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--3dy</code>

  <br>

  <div class="hamburger hamburger--3dy-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--3dy-r</code>

  <br>

  <div class="hamburger hamburger--3dxy">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--3dxy</code>

  <br>

  <div class="hamburger hamburger--3dxy-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--3dxy-r</code>

  <br>

  <div class="hamburger hamburger--arrow">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrow</code>

  <br>

  <div class="hamburger hamburger--arrow-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrow-r</code>

  <br>

  <div class="hamburger hamburger--arrowalt">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrowalt</code>

  <br>

  <div class="hamburger hamburger--arrowalt-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrowalt-r</code>

  <br>

  <div class="hamburger hamburger--arrowturn">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrowturn</code>

  <br>

  <div class="hamburger hamburger--arrowturn-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--arrowturn-r</code>

  <br>

  <div class="hamburger hamburger--boring">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--boring</code>

  <br>

  <div class="hamburger hamburger--collapse">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--collapse</code>

  <br>

  <div class="hamburger hamburger--collapse-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--collapse-r</code>

  <br>

  <div class="hamburger hamburger--elastic">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--elastic</code>

  <br>

  <div class="hamburger hamburger--elastic-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--elastic-r</code>

  <br>

  <div class="hamburger hamburger--emphatic">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--emphatic</code>

  <br>

  <div class="hamburger hamburger--emphatic-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--emphatic-r</code>

  <br>

  <div class="hamburger hamburger--minus">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--minus</code>

  <br>

  <div class="hamburger hamburger--slider">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--slider</code>

  <br>

  <div class="hamburger hamburger--slider-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--slider-r</code>

  <br>

  <div class="hamburger hamburger--spin">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--spin</code>

  <br>

  <div class="hamburger hamburger--spin-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--spin-r</code>

  <br>

  <div class="hamburger hamburger--spring">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--spring</code>

  <br>

  <div class="hamburger hamburger--spring-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--spring-r</code>

  <br>

  <div class="hamburger hamburger--stand">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--stand</code>

  <br>

  <div class="hamburger hamburger--stand-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--stand-r</code>

  <br>

  <div class="hamburger hamburger--squeeze">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--squeeze</code>

  <br>

  <div class="hamburger hamburger--vortex">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--vortex</code>

  <br>

  <div class="hamburger hamburger--vortex-r">
    <div class="hamburger-box">
      <div class="hamburger-inner"></div>
    </div>
  </div>
  <code>hamburger--vortex-r</code>

/**
   * forEach implementation for Objects/NodeLists/Arrays, automatic type loops and context options
   *
   * @private
   * @author Todd Motto
   * @link https://github.com/toddmotto/foreach
   * @param {Array|Object|NodeList} collection - Collection of items to iterate, could be an Array, Object or NodeList
   * @callback requestCallback      callback   - Callback function for each iteration.
   * @param {Array|Object|NodeList} scope=null - Object/NodeList/Array that forEach is iterating over, to use as the this value when executing callback.
   * @returns {}
   */
    var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};

    var hamburgers = document.querySelectorAll(".hamburger");
    if (hamburgers.length > 0) {
      forEach(hamburgers, function(hamburger) {
        hamburger.addEventListener("click", function() {
          this.classList.toggle("is-active");
        }, false);
      });
    }