Animated CSS Icons

animated-css-icons.markdown

Animated CSS Icons

A bunch of animated CSS icons using BEMIT as CSS naming convention. Builded as component with relative units.

A Pen by Vivian on CodePen.

License.

index.html

<div class="icon__group">
  <div class="icon icon--hamburger"><span></span></div>
  <div class="icon icon--hamburger-cross"><span></span></div>
  <div class="icon icon--plus"></div>
  <div class="icon icon--plus-cross"></div>
  <div class="icon icon--arrow"></div>
  <div class="icon icon--arrow-cross"></div>
  <div class="icon icon--search"><span></span></div>
</div>

script.js

(function() {
  'use strict';

  document.addEventListener('DOMContentLoaded', function() {
    var icons = this.querySelectorAll('.icon');
    var toggleActive = function() {
      this.classList.toggle('is-active');
    };

    for (var i = 0; i < icons.length; i++) {
      icons[i].addEventListener('click', toggleActive);
    }
  });
}());

style.scss

$fs-base : 16px; // define value for 1rem
$s-icon  : 2rem; // change this value to control icon size
 
// ========================================
// Layout
// ========================================

html {
  font-size: $fs-base;
}

body {
  background-color: #2980b9;
}

.icon {
  display: inline-block;
  
  & + & {
    margin-left: 2.5rem;
  }
  
  &__group {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    font-size: $s-icon;
    text-align: center;
  }
}

// ========================================
// Helper / Convert px to em
// ========================================

@function em($pixels, $context: $fs-base) {
  @return #{$pixels/$context}em;
}

// ========================================
// Icon Component
// ========================================

$c-icon        : #f0f0f0;
$s-icon-bar    : 2px;
$s-icon-radius : 2px;

.icon {
  position: relative;
  cursor: pointer;

  &:before,
  &:after {
    content: '';
  }

  span,
  &:before,
  &:after {
    position: absolute;
    display: block;
    background-color: $c-icon;
    border-radius: em($s-icon-radius);
    transition: all .2s;
  }
  
// ========================================
// Icon Component / Hamburger
// ========================================
  
  &--hamburger,
  &--hamburger-cross {
    width: 1em * 1.5;
    height: 1em;
    
    span,
    &:before,
    &:after {
      left: 0;
      transform: translate3D(0, 0, 0);
      width: 100%;
      height: em($s-icon-bar);
    }

    &:before {
      top: 0;
    }

    span {
      top: 50%;
      transform: translate3D(0, -50%, 0);
    }

    &:after {
      bottom: 0;
    }
    
    &:hover {
      &:before {
        top: -10%;
      }

      &:after {
        bottom: -10%;
      }
    }
  }
  
  &--hamburger {
    &.is-active {
      &:before {
        top: 50%;
        transform: translate3D(0, -50%, 0);
      }

      &:after {
        bottom: 50%;
        transform: translate3D(0, 50%, 0);
      }
    }
  }
  
  &--hamburger-cross {
    &:before,
    &:after {
      transform-origin: center;
    }
    
    &.is-active {
      &:before {
        top: 50%;
        transform: translate3D(0, -50%, 0) rotate(45deg)
      }

      span {
        opacity: 0;
      }

      &:after {
        bottom: 50%;
        transform: translate3D(0, 50%, 0) rotate(-45deg);
      }
    }
  }
  
// ========================================
// Icon Component / Plus
// ========================================
  
  &--plus,
  &--plus-cross {
    width: 1em;
    height: 1em;
    
    &:before {
      top: 50%;
      left: 0;
      transform: translate3D(0, -50%, 0) rotate(0);
      width: 100%;
      height: em($s-icon-bar);
    }

    &:after {
      top: 50%;
      left: 50%;
      transform: translate3D(-50%, -50%, 0) rotate(0);
      width: em($s-icon-bar);
      height: 100%;
    }
  }
  
  &--plus {
    &.is-active {
      &:before {
        transform: translate3D(0, -50%, 0) rotate(180deg);
      }

      &:after {
        transform: translate3D(-50%, -50%, 0) rotate(90deg);
      }
    }
  }
  
  &--plus-cross {
    &:before,
    &:after {
      transform-origin: center;
    }
    
    &.is-active {
      &:before {
        transform: translate3D(0, -50%, 0) rotate(135deg);
      }

      &:after {
        transform: translate3D(-50%, -50%, 0) rotate(135deg);
      }
    }
  }

// ========================================
// Icon Component / Arrow
// ========================================
  
  &--arrow,
  &--arrow-cross {
    width: 1em;
    height: 1em;
    
    &:before,
    &:after {
      top: 50%;
      width: 80%;
      height: em($s-icon-bar);
    }

    &:before {
      left: 10%;
      transform: translate3D(-30%, -50%, 0) rotate(45deg);
    }

    &:after {
      right: 10%;
      transform: translate3D(30%, -50%, 0) rotate(-45deg);
    }
  }
  
  &--arrow {
    &:before,
    &:after {
      transition: all .15s;
    }
    
    &.is-active {
      &:before {
        width: 80%;
        transform: translate3D(-30%, -50%, 0) rotate(-45deg);
      }

      &:after {
        width: 80%;
        transform: translate3D(30%, -50%, 0) rotate(45deg);
      }
    }
  }
  
  &--arrow-cross {
    &.is-active {
      &:before {
        width: 100%;
        transform: translate3D(-10%, -50%, 0) rotate(45deg);
      }

      &:after {
        width: 100%;
        transform: translate3D(10%, -50%, 0) rotate(-45deg);
      }
    }
  }

// ========================================
// Icon Component / Search
// ========================================
  
  &--search {
    width: 1em;
    height: 1em;
    transition: transform .2s;
    
    &:before,
    &:after {
      bottom: 0;
      right: .2em;
      width: .5em;
      height: em($s-icon-bar);
      transform: rotate(45deg);
      transform-origin: right bottom;
    }

    span {
      display: block;
      top: 0;
      left: 0;
      width: .5em;
      height: .5em;
      border: em($s-icon-bar) solid $c-icon;
      border-radius: 100%;
      background-color: transparent;
      transform: scale(1);
    }
    
    &.is-active {
      transform: rotate(90deg);
      
      &:before,
      &:after {
        bottom: 50%;
        right: 0;
        width: 100%;
        transform-origin: center;
      }
      
      &:before {
        transform: translate3D(0, 50%, 0) rotate(45deg);
      }

      &:after {
        transform: translate3D(0, 50%, 0) rotate(135deg);
      }
      
      span {
        transform: scale(0);
      }
    }
  }
  
}