CSS3: Navicon Transformicons

README.md

Icon animation using CSS3

Source: A Pen by Bennett Feely on CodePen.

License.

index.html

<section>
  <nav>
    <a class="navicon-button larr">
      <div class="navicon"></div>
    </a>
    <a class="navicon-button rarr">
      <div class="navicon"></div>
    </a>
    <a class="navicon-button uarr">
      <div class="navicon"></div>
    </a>    
    <a class="navicon-button x">
      <div class="navicon"></div>
    </a>
    <a class="navicon-button plus">
      <div class="navicon"></div>
    </a>
    <a class="navicon-button">
      <div class="navicon"></div>
    </a>
  </nav>
  <h1>Click the icons!</h1>
</section>

script.js

$("a").click(function(){
  $(this).toggleClass("open");
  $("h1").addClass("fade");
});

style.css

@charset "UTF-8";
.navicon-button {
  display: inline-block;
  position: relative;
  padding: 2.0625rem 1.5rem;
  transition: 0.25s;
  cursor: pointer;
  user-select: none;
  opacity: .8;
}
.navicon-button .navicon:before, .navicon-button .navicon:after {
  transition: 0.25s;
}
.navicon-button:hover {
  transition: 0.5s;
  opacity: 1;
}
.navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after {
  transition: 0.25s;
}
.navicon-button:hover .navicon:before {
  top: .825rem;
}
.navicon-button:hover .navicon:after {
  top: -.825rem;
}

.navicon {
  position: relative;
  width: 2.5em;
  height: .3125rem;
  background: #E7E6DD;
  transition: 0.5s;
  border-radius: 2.5rem;
}
.navicon:before, .navicon:after {
  display: block;
  content: "";
  height: .3125rem;
  width: 2.5rem;
  background: #E7E6DD;
  position: absolute;
  z-index: -1;
  transition: 0.5s 0.25s;
  border-radius: 1rem;
}
.navicon:before {
  top: .625rem;
}
.navicon:after {
  top: -.625rem;
}

.open:not(.steps) .navicon:before,
.open:not(.steps) .navicon:after {
  top: 0 !important;
}

.open .navicon:before,
.open .navicon:after {
  transition: 0.5s;
}

/* Minus */
.open {
  transform: scale(0.75);
}

/* Arrows */
.open.larr .navicon:before, .open.larr .navicon:after,
.open.rarr .navicon:before,
.open.rarr .navicon:after,
.open.uarr .navicon:before,
.open.uarr .navicon:after {
  width: 1.5rem;
}
.open.larr .navicon:before,
.open.rarr .navicon:before,
.open.uarr .navicon:before {
  transform: rotate(35deg);
  transform-origin: left top;
}
.open.larr .navicon:after,
.open.rarr .navicon:after,
.open.uarr .navicon:after {
  transform: rotate(-35deg);
  transform-origin: left bottom;
}

.open.uarr {
  transform: scale(0.75) rotate(90deg);
}

/* Arrows */
.open.rarr .navicon:before {
  transform: translate3d(1em, 0, 0) rotate(-35deg);
  transform-origin: right top;
}
.open.rarr .navicon:after {
  transform: translate3d(1em, 0, 0) rotate(35deg);
  transform-origin: right bottom;
}

/* × and + */
.open.plus .navicon,
.open.x .navicon {
  background: transparent;
}
.open.plus .navicon:before,
.open.x .navicon:before {
  transform: rotate(-45deg);
}
.open.plus .navicon:after,
.open.x .navicon:after {
  transform: rotate(45deg);
}

.open.plus {
  transform: scale(0.75) rotate(45deg);
}

/* Base ================== */
* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

html, body, section {
  position: relative;
  height: 100%;
}

body {
  background: #449A88;
  padding: 1.5rem 1.5rem 0;
  backface-visibility: hidden;
}

section {
  display: flex;
  max-width: 40rem;
  margin: 0 auto;
  flex-direction: column;
  justify-content: space-between;
  border-radius: .5rem .5rem 0 0;
  background: #E7E6DD;
  overflow: hidden;
  /* Smoother animations */
}
section *, section *:before, section *:after {
  transform: translate3d(0, 0, 0);
}

nav {
  display: flex;
  justify-content: space-between;
  height: 4.5rem;
  background: #2A2A2A;
  text-align: right;
  border-radius: .5rem .5rem 0 0;
  padding: 0 1rem;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

h1 {
  text-align: right;
  font: 2rem/4.5rem "Kite One";
  padding: 0 1.5rem;
  opacity: .5;
  transition: 1s;
  pointer-events: none;
}
h1.fade {
  opacity: 0;
}

@font-face {
  font-family: 'Kite One';
  font-style: normal;
  font-weight: 400;
  src: local("Kite One"), local("KiteOne-Regular"), url(http://themes.googleusercontent.com/static/fonts/kiteone/v1/VNHoD96LpZ9rGZTwjozAOnYhjbSpvc47ee6xR_80Hnw.woff) format("woff");
}