A Pen by Craig Richardson.

CSS-Icons.markdown

CSS Icons

This is a rebound of "[GIF]Animations" from Filip Slováček.

http://dribbble.com/shots/1386563--GIF-Interactions?list=users

A Pen by Craig Richardson on CodePen.

License.

index.jade

div.container
            a.icon-menu
                      div.icon__wrap
                                   div.icon
                                          div.line
                                          div.line
                                          div.line
            a.icon-arrow-left
                            div.icon__wrap
                                         div.icon
                                                div.line
                                                div.line
                                                div.line
            a.icon-arrow-right
                             div.icon__wrap
                                          div.icon
                                                 div.line
                                                 div.line
                                                 div.line                                          
            a.icon-cross
                       div.icon__wrap
                                    div.icon
                                           div.line
                                           div.line                                        

script.js

/*==================

This is a rebound of "[GIF]Animations" On Dribbble:

http://dribbble.com/shots/1386563--GIF-Interactions?list=users

==================*/

var index = 0,
    intervalTime = 3000,
    $el = $('[class^=icon-]'),
    timer = setInterval(cycleActiveIcons, intervalTime);

function cycleActiveIcons() {
  if (index === 4) index = 0;

  $el.eq(index).addClass('active');

  setTimeout(function() {
    $el.removeClass('active');
  }, intervalTime/2);

  index++;
}

style.scss

@import "compass";
$transitionDuration: .5s;
$transitionEffect: ease;

body { 
  background-color: #1d1d1f;
  .container {
    bottom: 0;
    height:100px;
    left: 0;
    margin: auto;
    padding: 10px 0;
    position: absolute;  
    right: 0;
    text-align:center;
    top: 0;
    width: 680px;
  }
}

//Square container for icons.
[class^="icon-"] {
  @include transform(rotate(45deg));
  display:inline-block;
  height:90px;
  width:90px;
  position: relative;
  overflow: hidden;
  background: #545356;
  margin: 0 40px;
  &:before {
    @include transition(top $transitionDuration $transitionEffect, left $transitionDuration $transitionEffect);
    @include transform(rotate(45deg));
    content:"";
    width:140%;
    height:140%;
    position: absolute;
    background: #fff;
    top:80%;
    left:80%;
    z-index: 10;
  }

  &:after {
    background-color: #1d1d1f;
    background-clip: padding-box;
    border: 4px solid rgba(0,0,0,0);
    bottom:0;
    @include box-sizing(border-box);
    content:"";
    height:100%;
    width:100%;
    position: absolute;
    right:0;
    @include transform(translateZ(0));
    z-index: 20;
  }

  &:hover:before, &.active:before{
    left:-20%;
    top:-20%;
  }

  &:hover .icon__wrap:after,  &.active .icon__wrap:after{
    top: -35%;
  }

  //White horizontal animation
  .icon__wrap  {
    position:relative;
    @include transform(rotate(315deg));  
    z-index: 30;
    width: 100%;
    height: 100%;
    &:after {
      z-index: 40;
      content: "";
      width:140%;
      height: 4px;
      background: #fff;
      position: absolute;
      top: 121%;
      left: -10%;
      @include transition(top $transitionDuration $transitionEffect);
    }
  
    //Main wrapper and logic for inner icons.
    .icon{
      @include box-sizing(border-box);  
      @include transition(all $transitionDuration $transitionEffect);
      .line{
        @include transition(all $transitionDuration $transitionEffect);
        &:after{
        @include transition(all $transitionDuration $transitionEffect);
        }
      }
    }
  }
}



.icon-menu .icon {
  padding-top:30px;
  padding-left:13px;
  .line {
    background-color: transparent;
    height: 4px; 
    margin-bottom: 8px;
    position: relative;
    width: 32px;
    &:after{
      background-color: #515153;
      content: "";
      height: 100%; 
      position:absolute;
      top:0;
      width: 100%;
    } 
    &:first-of-type, &:last-of-type, &:nth-of-type(2):after {
      @include transform(translateX(100%));
    }
    &:nth-of-type(2), &:first-of-type:after, &:last-of-type:after{
      @include transform(translateX(-100%));
    }
  }
}

.icon-arrow-left .icon {
  padding-top:36px;
  padding-left:29px;

  .line {
    position: relative;
    width:29px;  
    height: 4px;  
    background-color: #515153;
    margin-top: 1px;;
    &:first-of-type {
      @include transform(rotate(-45deg));
      width: 18px;
    }
    &:nth-of-type(2) {
      margin-left:3px; 
    }
    &:last-of-type{
      @include transform(rotate(45deg));
      width: 18px;
    }

    &:after{
      @extend .line;
      margin: 0;
      margin-left: 1px;
      content: "";
      position: absolute;
      background-color: transparent;
      @include transform(translateX(100%));
    }

    &:first-of-type:after {
      @include transform(rotate(0));
      top:28px;
      left:150%;
    }

    &:nth-of-type(2):after {
      @include transform(translateX(100%));
      margin-left: -5px;
    }

    &:last-of-type:after{
      @include transform(rotate(0));
      bottom:28px;
      left:150%;
    }
  }
}


.icon-arrow-right .icon{
  padding-top:36px;
  padding-left:25px;
  .line{
    width:29px;  
    height: 4px;  
    background-color: #515153;
    margin-top: 1px;;
    &:first-of-type {
      @include transform(rotate(45deg));
      width: 18px;
      margin-left: 18px;
    }
    &:nth-of-type(2) {
      margin-left:3px; 
    }
    &:last-of-type{
      @include transform(rotate(-45deg));
      margin-left: 18px;
      width: 18px;
    }
    &:after{
      @extend .line;
      margin: 0;
      margin-left: 1px;
      content: "";
      position: absolute;
      background-color: #1d1d1f;
      @include transform(translateX(-145%));
      margin-right: 1px;;
    }
    &:first-of-type:after {
      @include transform(rotate(0));
      top:28px;
      right:150%;
    }
    &:nth-of-type(2):after {
      margin-left: -12px;
    }
    &:last-of-type:after{
      @include transform(rotate(0));
      top:-28px;
      right:150%;
    }

  }
}


.icon-cross .icon{
  padding-top:42px;
  padding-left:25px;

  .line{
    position: relative;
    width:38px;  
    height: 4px;  
    background-color: #515153;

    &:first-of-type {
      @include transform(rotate(45deg));
      margin-bottom: -4px;
    }

    &:last-of-type{
      @include transform(rotate(-45deg));
    }

    &:after{
      @extend .line;
      content:"";
      position: absolute;
      background-color: transparent;
      margin-top: 4px;
    }

    &:first-of-type:after {
      top:-100%;
      left:-100%;
      @include transform(rotate(0));
    }

    &:last-of-type:after{
      top:-100%;
      left:-100%;
      @include transform(rotate(0));
    }
  }
}


//Hover functions
.icon-menu:hover, .icon-menu.active{
  .icon .line {
    @include transform(translateX(16px));
    background-color: #fff;
    &:after{
      opacity:0;
    }
  }
}

.icon-arrow-left:hover, .icon-arrow-left.active {
  .icon{
    @include transform(translateX(-38px));
    .line {
      background-color: #1d1d1f;
      &:after{
        background-color: #fff;
      }
    }
  }
}

.icon-arrow-right:hover, .icon-arrow-right.active {
  .icon{
    @include transform(translateX(38px));
    .line {
      background-color: #1d1d1f;
      &:after{
        background-color: #fff;
      }
    }
  }
}

.icon-cross:hover, .icon-cross.active {
  .icon {
    .line {
      background-color: transparent;
      &:after{
        background-color: #fff; 
      }
      &:first-of-type {
        @include transform(rotate(45deg) translateX(100%));
      }
      &:last-of-type{
        @include transform(rotate(-45deg) translateX(100%));
      }
      &:first-of-type:after , &:last-of-type:after{
        top:-100%;
        left:-100%;
        @include transform(rotate(0));
      }    
    }
  }
}