CSS3 and Jquery Search field Animation

This tip is show you how to making a search box using CSS3, Jquery and SVG. It will make your website more interesting.

How to make it:
1. Create a SVG search icon.

2. Create a search input.

4. The core CSS/CSS3 styles.

svg {
  position: absolute;
  transform: translateX(-246px);
  width: 600px;
  height: auto;
  stroke-width: 8px;
  stroke: #b3c33a;
  stroke-width: 1px;
  stroke-dashoffset: 0;
  stroke-dasharray: 64.6 206.305;
  transition: all 0.5s ease-in-out;
}

.input-search {
  position: absolute;
  width: calc(100% - 148px);
  height: 64px;
  top: 0;
  right: 20px;
  bottom: 0;
  left: 0;
  border: none;
  background-color: transparent;
  outline: none;
  padding: 20px;
  font-size: 50px;
}

.search-label {
  position: absolute;
  display: block;
  width: 108px;
  height: 108px;
  top: 0;
  left: 50%;
  margin-left: -54px;
  z-index: 100;
  transition: 0.5s ease-in-out;
}

.isActive .search-label { transform: translateX(246px); }

.isActive svg {
  stroke-dashoffset: -65;
  stroke-dasharray: 141.305 65;
  transform: translateX(0);
}

.isActive.full svg {
  stroke-dashoffset: -65;
  stroke-dasharray: 141.305 65;
  transform: translateX(0);
}

.full .search-label { transform: translateX(246px); }

.full svg {
  stroke-dashoffset: 0;
  stroke-dasharray: 64.6 206.305;
  transform: translateX(0);
}

.search {
  position: absolute;
}

5. The jQuery script to enable the animated search field on focus.

var searchField = $('.search');
var searchInput = $("input[type='search']");

var checkSearch = function(){
    var contents = searchInput.val();
    if(contents.length !== 0){
      searchField.addClass('full');
    } else {
      searchField.removeClass('full');
    }
};

$("input[type='search']").focus(function(){
    searchField.addClass('isActive');
  }).blur(function(){
    searchField.removeClass('isActive');
    checkSearch();
});

Demo Download