<div class="container">
  <h1><span>Search</span> Field Animations</h1>
  <div class="subheader">(click to check effect)</div>
  <div class="link">
    <a href="https://github.com/eisenfox/search-field-animations" title="Check on GitHub" target="_blanc">
      <i class="material-icons">send</i>Check on GitHub
    </a>
    <a href="http://100dayscode.co.uk/" title="Check Codepen Challenge" target="_blanc">
      <i class="material-icons">send</i>Check Codepen Challenge
    </a>
  </div>
  
  <div class="content-block">   
    
    <!-- effect #1-->
    <div class="content-block__effect">
      <h2>Effect #1</h2>
      
      <div class="search-effect-block"> 
        <form class="search-effect search-effect--1" data-effect="1">
          
          <input type="search" class="search-effect__search-field search-effect__search-field--1" autocomplete placeholder="Search">
          
          <!-- button which opens search input -->
          <button class="search-effect__open-btn search-effect__open-btn--1" type="button">
            <i class="material-icons">search</i>
          </button>
          
          <!-- button which closes search input -->
          <button class="search-effect__close-btn search-effect__close-btn--1" type="button">
            <i class="material-icons">close</i>
          </button>
          
          <!-- button which opens search input -->
          <button class="search-effect__search-btn search-effect__search-btn--1" type="button">
            <i class="material-icons">search</i>
          </button>
          
        </form>
      </div>
      
    </div>
    
    <!-- effect #2-->
    <div class="content-block__effect">
      <h2>Effect #2</h2>
      
      <div class="search-effect-block"> 
        <form class="search-effect search-effect--2" data-effect="2">
          
          <input type="search" class="search-effect__search-field search-effect__search-field--2" autocomplete placeholder="Search">
          
          <!-- button which opens search input -->
          <button class="search-effect__open-btn search-effect__open-btn--2" type="button">
            <i class="material-icons">search</i>
          </button>
          
          <!-- button which closes search input -->
          <button class="search-effect__close-btn search-effect__close-btn--2" type="button">
            <i class="material-icons">close</i>
          </button>
          
          <!-- button which opens search input -->
          <button class="search-effect__search-btn search-effect__search-btn--2" type="button">
            <i class="material-icons">search</i>
          </button>
          
        </form>
      </div>
      
    </div>
    
    <!-- effect #3-->
    <div class="content-block__effect">
      <h2>Effect #3</h2>
      
      <div class="search-effect-block"> 
        <form class="search-effect search-effect--3" data-effect="3">
          
          <input type="search" class="search-effect__search-field search-effect__search-field--3" autocomplete placeholder="Search">
          
          <!-- button which opens search input -->
          <button class="search-effect__open-btn search-effect__open-btn--3" type="button">
            <i class="material-icons">search</i>
          </button>
          
          <!-- button which closes search input -->
          <button class="search-effect__close-btn search-effect__close-btn--3" type="button">
            <i class="material-icons">close</i>
          </button>
          
          <!-- button which opens search input -->
          <button class="search-effect__search-btn search-effect__search-btn--3" type="button">
            <i class="material-icons">search</i>
          </button>
          
        </form>
      </div>
      
    </div>
    
    <!-- effect #4-->
    <div class="content-block__effect">
      <h2>Effect #4</h2>
      
      <div class="search-effect-block"> 
        <form class="search-effect search-effect--4" data-effect="4">
          
          <input type="search" class="search-effect__search-field search-effect__search-field--4" autocomplete placeholder="Search">
          
          <!-- button which opens search input -->
          <button class="search-effect__open-btn search-effect__open-btn--4" type="button">
            <i class="material-icons">search</i>
          </button>
          
          <!-- button which closes search input -->
          <button class="search-effect__close-btn search-effect__close-btn--4" type="button">
            <i class="material-icons">close</i>
          </button>
          
          <!-- button which opens search input -->
          <button class="search-effect__search-btn search-effect__search-btn--4" type="button">
            <i class="material-icons">search</i>
          </button>
          
        </form>
      </div>
      
    </div>
    
    <!-- effect #4-->
    <div class="content-block__effect">
      <h2>Effect #5</h2>
      
      <div class="search-effect-block"> 
        <form class="search-effect search-effect--5" data-effect="5">
          
          <input type="search" class="search-effect__search-field search-effect__search-field--5" autocomplete placeholder="Search">
          
          <!-- button which opens search input -->
          <button class="search-effect__open-btn search-effect__open-btn--5" type="button">
            <i class="material-icons">search</i>
          </button>
          
          <!-- button which closes search input -->
          <button class="search-effect__close-btn search-effect__close-btn--5" type="button">
            <i class="material-icons">close</i>
          </button>
          
          <!-- button which opens search input -->
          <button class="search-effect__search-btn search-effect__search-btn--5" type="button">
            <i class="material-icons">search</i>
          </button>
          
        </form>
      </div>
      
    </div>
    
  </div>
</div>
//VARIABLES
$dark-theme-color: #1f1f1f;
$light-theme-color: #fff; 
$accent-theme-color: #1282a2;
$accent-theme-color2: #df3b57;
$accent-theme-color3: #f49d37; 
$accent-theme-color4: #18ad1a;   
$accent-theme-color5: #46237a;

$search-effect-height: 40px;
$search-effect-width-toggled: 500px;     
$search-field-border: 2px;
$search-effect-btn-dimensions: $search-effect-height - $search-field-border * 2;
$search-field-padding-horz: 15px;
$search-field-padding-horz-lg: $search-effect-btn-dimensions * 1.2;
$search-btn-default-position-horz: $search-field-border;
$search-btn-default-position-vert: $search-field-border;
$search-btn-close-default-position-horz: - 40px;

//MIXINS

//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}

//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

/* common styles !!!YOU DON'T NEED THEM  */
body {
  font: {
    family: "Montserrat", sans-serif;
    size: 16px;
  }
  color: $dark-theme-color;
}

.container {
  width: 750px;
  margin: 50px auto 0px auto;
  text-align: center;
}

h1 {
  margin: 0;

  font: {
    weight: 400;
    size: 35px;
  }

  span {
    font: {
      family: "Satisfy", cursive;
    }
    color: $accent-theme-color;
  }
}

.link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto 0;

  a {
    @include transition-mix;

    display: inline-flex;
    align-items: center;
    margin-right: 20px;

    font: {
      size: 17px;
    }
    color: #1f1f1f;
    text-decoration: none;

    &:last-child {
      margin-right: 0;
    }

    &:hover {
      color: $accent-theme-color;
    }

    i {
      color: $accent-theme-color;
      margin-right: 5px;
    }
  }
}

.content-block {
  margin-top: 50px;

  h2 {
    margin-bottom: 30px;

    font: {
      weight: 400;
    }
  }
}

.content-block__effect {
  margin-bottom: 50px;
}

.search-effect-block {
  display: flex;
  justify-content: center;
}

/* basic styles !!!YOU NEED THEM */

//removing browser search appearance
input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

input[type="search"] {
  -moz-appearance: none;
  -webkit-appearance: none;
}

.search-effect {
  position: relative;

  width: $search-effect-btn-dimensions;
  height: $search-effect-height;

  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }
}

.search-effect__search-field {
  @include position-absolute ($top: 0, $left: 0);

  display: block;
  width: 100%;
  height: 100%;
  padding: 0 $search-field-padding-horz;

  font: {
    family: inherit;
    size: inherit;
    weight: inherit;
  }
  color: inherit;

  border: $search-field-border solid;
  outline: none;

  opacity: 0;
  visibility: hidden;

  z-index: 1;
}

.search-effect__open-btn,
.search-effect__close-btn,
.search-effect__search-btn {
  @include position-absolute();

  display: flex;
  justify-content: center;
  align-content: center;
  width: $search-effect-btn-dimensions;
  height: $search-effect-btn-dimensions;
  padding: 0;

  border: none;
  background-color: transparent;
  outline: none;

  cursor: pointer;
  z-index: 3;
}

.search-effect__close-btn,
.search-effect__search-btn {
  opacity: 0;
  visibility: hidden;
}

.search-effect__open-btn {
  left: calc(50% - (#{$search-effect-btn-dimensions} / 2));
  top: calc(50% - (#{$search-effect-btn-dimensions} / 2));

  width: $search-effect-btn-dimensions;
  height: $search-effect-btn-dimensions;
}

.search-effect__search-btn {
  top: $search-btn-default-position-vert;
  right: $search-btn-default-position-horz;
}

.search-effect__close-btn {
  top: $search-btn-default-position-vert;
  right: $search-btn-close-default-position-horz;

  i {
    font-size: 22px;
  }
}

/* effect #1 styles */
.search-effect__search-field--1 {
  padding-right: $search-field-padding-horz-lg;

  transform: scale(0, 1);
  transform-origin: left center;

  border-color: $accent-theme-color2;
  border-radius: $search-effect-height;
}

.search-effect__open-btn--1,
.search-effect__search-btn--1 {
  color: $light-theme-color;

  background-color: $accent-theme-color2;
  border-radius: 50%;
}

.search-effect__open-btn--1 {
  @include transition-mix($delay: 0.1s);
}

.search-effect__close-btn--1 {
  right: $search-btn-close-default-position-horz - 10;

  color: $accent-theme-color2;
}

.search-effect--1-toggle {
  @include transition-mix($duration: 0s, $delay: 0.2s);

  width: $search-effect-width-toggled;
}

.search-effect__open-btn--1-toggle {
  @include transition-mix($timing: cubic-bezier(0.58, 0.02, 1, 1.38));

  top: 20px;

  opacity: 0;
  visibility: hidden;
}

.search-effect__search-field--1-toggle {
  @include transition-mix($delay: 0.25s);

  transform: scale(1, 1);

  opacity: 1;
  visibility: visible;
}

.search-effect__search-btn--1-toggle {
  @include transition-mix($delay: 0.55s);

  opacity: 1;
  visibility: visible;
}

.search-effect__close-btn--1-toggle {
  @include transition-mix($delay: 0.75s);

  right: $search-btn-close-default-position-horz;

  opacity: 1;
  visibility: visible;
}

/* effect #2 styles*/
.search-effect__open-btn--2,
.search-effect__search-btn--2 {
  color: $accent-theme-color;

  i {
    font: {
      size: 35px;
    }
  }
}

.search-effect__open-btn--2 {
  @include transition-mix($delay: 0.2s);
}

.search-effect__search-btn--2 {
  right: - 20px;
}

.search-effect__search-field--2 {
  left: -30px;

  padding-right: $search-field-padding-horz-lg;

  border-color: $accent-theme-color;
}

.search-effect__close-btn--2 {
  color: $accent-theme-color;

  transform: scale(1.2);
}

.search-effect--2-toggle {
  @include transition-mix($duration: 0s, $delay: 0.2s);

  width: $search-effect-width-toggled;
}

.search-effect__open-btn--2-toggle {
  @include transition-mix($duration: 0.15s);

  transform: scale(0.5);

  opacity: 0;
  visibility: hidden;
}

.search-effect__search-field--2-toggle {
  @include transition-mix($delay: 0.25s);

  left: 0;
}

.search-effect__search-btn--2-toggle {
  @include transition-mix($delay: 0.25s);

  right: $search-btn-default-position-horz;
}

.search-effect__close-btn--2-toggle {
  @include transition-mix($delay: 0.55s);

  transform: scale(1);
}

.search-effect__search-field--2-toggle,
.search-effect__search-btn--2-toggle,
.search-effect__close-btn--2-toggle {
  opacity: 1;
  visibility: visible;
}

/* effect #3 styles*/
.search-effect--3 {
  @include transition-mix($delay: 0.1s);
}

.search-effect__open-btn--3 {
  @include transition-mix($delay: 0.3s);

  color: $light-theme-color;

  background-color: $accent-theme-color3;
  border-radius: 5px;

  z-index: 1;
}

.search-effect__search-field--3 {
  padding-left: $search-field-padding-horz-lg;

  border-color: $accent-theme-color3;
  border-radius: 5px;

  z-index: 2;
}

.search-effect__search-btn--3 {
  right: calc(
    100% - #{$search-field-border} - #{$search-effect-btn-dimensions}
  );

  color: $light-theme-color;

  background-color: $accent-theme-color3;
}

.search-effect__close-btn--3 {
  color: $accent-theme-color3;

  transform: rotate(45deg);
}

.search-effect--3-toggle {
  @include transition-mix($duration: 0s, $delay: 0.2s);

  width: $search-effect-width-toggled;
}

.search-effect__open-btn--3-toggle {
  @include transition-mix();

  top: $search-btn-default-position-vert;
  left: 0;

  width: 100%;

  color: transparent;
}

.search-effect__search-field--3-toggle {
  @include transition-mix($delay: 0.25s);
}

.search-effect__search-btn--3-toggle {
  @include transition-mix($delay: 0.5s);
}

.search-effect__close-btn--3-toggle {
  @include transition-mix($delay: 0.7s);

  transform: rotate(0deg);
}

.search-effect__search-field--3-toggle,
.search-effect__search-btn--3-toggle,
.search-effect__close-btn--3-toggle {
  opacity: 1;
  visibility: visible;
}

/* effect #4 styles */
.search-effect--4 {
  @include transition-mix($delay: 0.1s);
}

.search-effect__open-btn--4 {
  @include transition-mix($delay: 0.3s);

  i {
    font: {
      size: 35px;
    }
  }
}

.search-effect__open-btn--4,
.search-effect__search-btn--4 {
  color: $accent-theme-color4;
}

.search-effect__search-btn--4 {
  right: calc(
    100% - #{$search-field-border} - #{$search-effect-btn-dimensions} - 20px
  );

  i {
    font: {
      size: 30px;
    }
  }
}

.search-effect__search-field--4 {
  padding-left: $search-field-padding-horz-lg;

  transform: scale(1.1);

  border-color: $accent-theme-color4;
}

.search-effect__close-btn--4 {
  color: $accent-theme-color4;
}

.search-effect--4-toggle {
  @include transition-mix($duration: 0s, $delay: 0.2s);

  width: $search-effect-width-toggled;
}

.search-effect__open-btn--4-toggle {
  @include transition-mix();

  transform: scale(1.3);

  opacity: 0;
  visibility: hidden;
}

.search-effect__search-field--4-toggle {
  @include transition-mix($delay: 0.25s);

  transform: scale(1);
}

.search-effect__search-btn--4-toggle {
  @include transition-mix($delay: 0.45s);

  right: calc(
    100% - #{$search-field-border} - #{$search-effect-btn-dimensions}
  );
}

.search-effect__close-btn--4-toggle {
  @include transition-mix($delay: 0.7s);
}

.search-effect__search-field--4-toggle,
.search-effect__search-btn--4-toggle,
.search-effect__close-btn--4-toggle {
  opacity: 1;
  visibility: visible;
}

/* effect #5 styles */
.search-effect__open-btn--5,
.search-effect__search-btn--5 {
  color: $light-theme-color;

  background-color: $accent-theme-color5;
  border-radius: 50%;
}

.search-effect__search-btn--5 {
  width: $search-effect-width-toggled;
  border-radius: $search-effect-btn-dimensions;
}

.search-effect__open-btn--5 {
  @include transition-mix($delay: 0.3s);
}

.search-effect__search-field--5 {
  padding-right: $search-field-padding-horz-lg;

  transform: scale(0, 1);
  transform-origin: center center;

  border-color: $accent-theme-color5;
  border-radius: $search-effect-height;
}

.search-effect__close-btn--5 {
  color: $accent-theme-color5;
}

.search-effect--5-toggle {
  @include transition-mix($duration: 0s, $delay: 0.2s);

  width: $search-effect-width-toggled;
}

.search-effect__open-btn--5-toggle {
  @include transition-mix();

  transform: skew(60deg) scale(0.3);

  opacity: 0;
  visibility: hidden;
}

.search-effect__search-field--5-toggle {
  @include transition-mix($delay: 0.25s);

  transform: scale(1, 1);
}

.search-effect__search-btn--5-toggle {
  transition: opacity 0.2s linear 0.45s, width 0.3s linear 0.6s;

  width: $search-effect-btn-dimensions;
}

.search-effect__close-btn--5-toggle {
  @include transition-mix($delay: 0.8s);
}

.search-effect__search-field--5-toggle,
.search-effect__search-btn--5-toggle,
.search-effect__close-btn--5-toggle {
  opacity: 1;
  visibility: visible;
}
//add additional toggle classes after click on search icon (based on 'data-effect' attribute)

//open btn click
var searchOpenBtn = jQuery('.search-effect__open-btn');

searchOpenBtn.click(function() { 
  
  var currentBtn = jQuery(this),
      currentForm = currentBtn.parents('.search-effect'),
      effectNum = currentForm.attr('data-effect'),
      currentInput = currentForm.find('.search-effect__search-field'),
      currentOpenBtn = currentForm.find('.search-effect__open-btn'),
      currentCloseBtn = currentForm.find('.search-effect__close-btn'),
      currentSearchBtn = currentForm.find('.search-effect__search-btn');
  
  currentForm.addClass('search-effect--' + effectNum + '-toggle');
  currentInput.addClass('search-effect__search-field--' + effectNum + '-toggle');
  currentOpenBtn.addClass('search-effect__open-btn--' + effectNum + '-toggle');
  currentCloseBtn.addClass('search-effect__close-btn--' + effectNum + '-toggle');
  currentSearchBtn.addClass('search-effect__search-btn--' + effectNum + '-toggle');
});

//close btn click
var searchCloseBtn = jQuery('.search-effect__close-btn');

searchCloseBtn.click(function() {
  
  var currentBtn = jQuery(this),
      currentForm = currentBtn.parents('.search-effect'),
      effectNum = currentForm.attr('data-effect'),
      currentInput = currentForm.find('.search-effect__search-field'),
      currentOpenBtn = currentForm.find('.search-effect__open-btn'),
      currentCloseBtn = currentForm.find('.search-effect__close-btn'),
      currentSearchBtn = currentForm.find('.search-effect__search-btn');
  
  currentForm.removeClass('search-effect--' + effectNum + '-toggle');
  currentInput.removeClass('search-effect__search-field--' + effectNum + '-toggle');
  currentOpenBtn.removeClass('search-effect__open-btn--' + effectNum + '-toggle');
  currentCloseBtn.removeClass('search-effect__close-btn--' + effectNum + '-toggle');
  currentSearchBtn.removeClass('search-effect__search-btn--' + effectNum + '-toggle');
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js