<h1>        CSS Animated Search Boxes</h1>    <p>        (with occasional help from javascript to assign focus)</p>    <div class="sample one">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search fa fa-search">        </button>    </div>    <div class="sample two">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search fa fa-search">        </button>        <button type="reset" class="btn btn-reset fa fa-times">        </button>    </div>    <div class="sample three">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search fa-flip-horizontal"></i>        </button>    </div>    <div class="sample four">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search fa-flip-horizontal"></i>        </button>        <button type="reset" class="btn btn-reset fa fa-times">        </button>    </div>    <div class="sample five">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search fa-flip-horizontal"></i>        </button>    </div>    <div class="sample six">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search fa-flip-horizontal"></i>        </button>        <button type="reset" class="btn btn-reset fa fa-times">        </button>    </div>    <div class="sample seven">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search"></i>        </button>    </div>    <div class="sample eight">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search"></i>        </button>        <button type="reset" class="btn btn-reset fa fa-times">        </button>    </div>    <div class="sample nine">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search"></i>        </button>    </div>    <div class="sample ten">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search"></i>        </button>        <button type="reset" class="btn btn-reset fa fa-times">        </button>    </div>    <div class="sample eleven">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search"></i>        </button>    </div>    <div class="sample twelve">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search"></i>        </button>        <button type="reset" class="btn btn-reset fa fa-times">        </button>    </div>    <div class="sample thirteen">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search"></i>        </button>    </div>    <div class="sample fourteen">        <input type="text" name="search" placeholder="search">        <button type="submit" class="btn btn-search">            <i class="fa fa-search"></i>        </button>        <button type="reset" form="form" class="btn btn-reset fa fa-times">        </button>    </div>

  * {  box-sizing: border-box;}html,body {  font-size: 12px;}h1 {  margin: 10px 0 0;  text-align: center;}p {  margin: 0 0 20px;  text-align: center;}input {  border: 1px solid #ccc;  font-size: 12px;  height: 30px;  padding: 4px 8px;  position: absolute;  width: 50%;}input:focus {  outline: none;}button {  text-align: center;}button:focus {  outline: none;}button.btn-search, button.btn-reset {  background: hotpink;  border: none;  height: 30px;  font-size: 12px;  padding: 4px;  position: absolute;  width: 30px;}.sample {  float: left;  height: 50px;  margin: 0 8%;  position: relative;  width: 34%;}.sample.one input, .sample.two input {  border-radius: 15px;  right: 0;  transition: all .3s ease-in-out;  width: 50%;}.sample.one input:focus, .sample.two input:focus {  width: 100%;}.sample.one input:focus ~ button.btn-search, .sample.two input:focus ~ button.btn-search {  background: hotpink;  color: #fff;}.sample.one input:focus ~ button.btn-reset, .sample.two input:focus ~ button.btn-reset {  right: -22px;}.sample.one button, .sample.two button {  transition: all .3s ease-in-out;}.sample.one button.btn-search, .sample.two button.btn-search {  background: #ccc;  border-radius: 50%;  height: 26px;  right: 2px;  top: 2px;  transition: all .3s ease-in-out;  width: 26px;}.sample.one button.btn-reset, .sample.two button.btn-reset {  background: #fff;  border: 1px solid #ccc;  border-radius: 50%;  font-size: 10px;  height: 20px;  line-height: 20px;  padding: 0;  right: 5px;  top: 5px;  width: 20px;  z-index: -1;}.sample.three, .sample.four {  perspective: 400px;}.sample.three input, .sample.four input {  width: 120px;}.sample.three input:focus ~ button.btn-search, .sample.four input:focus ~ button.btn-search {  transform: rotateY(180deg);  transition: transform .6s ease-in-out .2s;}.sample.three input:focus ~ button.btn-reset, .sample.four input:focus ~ button.btn-reset {  transform: rotateX(0deg) translateY(32px) translateX(2px);  transition: transform .6s ease-in-out .8s;}.sample.three button.btn-search, .sample.four button.btn-search {  backface-visibility: visible;  color: #fff;  padding: 0;  position: relative;  transform: rotateY(0deg);  transform-origin: 121px 0;  transform-style: preserve3d;  transition: transform .6s ease-in-out .2s;  width: 120px;}.sample.three button.btn-reset, .sample.four button.btn-reset {  backface-visibility: hidden;  background: #ccc;  transform: rotateX(-180deg) translateY(30px) translateX(2px);  transform-origin: 0 32px;  transform-style: preserve3d;  transition: transform .6s ease-in-out .2s;  width: 120px;}.sample.four button.btn-search {  transition: transform .6s ease-in-out .8s;}.sample.five, .sample.six {  perspective: 400px;}.sample.five input, .sample.six input {  width: 120px;}.sample.five input:focus ~ button.btn-search, .sample.six input:focus ~ button.btn-search {  transform: rotateY(180deg) translateX(60px);  transition: all .6s ease-in-out .2s;  width: 60px;}.sample.five input:focus ~ button.btn-reset, .sample.six input:focus ~ button.btn-reset {  transform: rotateY(0deg);  transition: all .6s ease-in-out .8s;}.sample.five button.btn-search, .sample.six button.btn-search {  backface-visibility: visible;  color: #fff;  padding: 0;  position: relative;  transform: rotateY(0deg) translateX(0px);  transform-origin: 121px 0;  transform-style: preserve3d;  transition: all .6s ease-in-out .2s;  width: 120px;}.sample.five button.btn-reset, .sample.six button.btn-reset {  backface-visibility: hidden;  background: #ccc;  left: 184px;  transform: rotateY(180deg);  transform-origin: left 0;  transform-style: preserve3d;  transition: all .6s ease-in-out .2s;  width: 60px;}.sample.six button.btn-search {  transition: all .6s ease-in-out .8s;}.sample.seven input, .sample.eight input {  border-right: none;  transition: all .3s ease-in;  width: 120px;}.sample.seven input:focus, .sample.eight input:focus {  width: 220px;}.sample.seven input:focus ~ button.btn-search, .sample.eight input:focus ~ button.btn-search {  background: hotpink;  border-radius: 0 50% 50% 0;  color: #fff;  left: 220px;}.sample.seven input:focus ~ button.btn-reset, .sample.eight input:focus ~ button.btn-reset {  animation: bounceRight .6s;  animation-delay: .2s;  animation-timing-function: cubic-bezier(0.3, 0.2, 1, 0.8);  border-radius: 50%;  color: #fff;  left: 254px;}.sample.seven button.btn-search, .sample.eight button.btn-search {  background: #ccc;  left: 120px;  transition: all .3s ease-in;}.sample.seven button.btn-reset, .sample.eight button.btn-reset {  background: #000;  height: 20px;  left: 120px;  top: 5px;  transition: all .3s ease-in;  width: 20px;  z-index: -1;}.sample.nine input, .sample.ten input {  border-radius: 15px;  transition: all .6s ease-in-out .3s;  width: 120px;}.sample.nine input:focus, .sample.ten input:focus {  transition-delay: 0;  width: 200px;}.sample.nine input:focus ~ button, .sample.ten input:focus ~ button {  transform: rotateZ(360deg);}.sample.nine input:focus ~ button.btn-search, .sample.ten input:focus ~ button.btn-search {  background: hotpink;  color: #fff;  left: 172px;  transition-delay: 0;}.sample.nine input:focus ~ button.btn-reset, .sample.ten input:focus ~ button.btn-reset {  left: 202px;  transition-delay: .3s;}.sample.nine button, .sample.ten button {  transition: all .6s ease-in-out;}.sample.nine button.btn-search, .sample.ten button.btn-search {  background: #ccc;  border-radius: 50%;  height: 26px;  left: 92px;  top: 2px;  transition-delay: .3s;  width: 26px;}.sample.nine button.btn-reset, .sample.ten button.btn-reset {  background: #fff;  border: 1px solid #ccc;  border-radius: 50%;  font-size: 10px;  height: 20px;  left: 92px;  line-height: 20px;  padding: 0;  top: 5px;  width: 20px;  z-index: -1;}.sample.eleven input, .sample.twelve input {  border-radius: 15px;  transition: all .6s ease-in-out;  width: 120px;}.sample.eleven input:focus, .sample.twelve input:focus {  width: 200px;}.sample.eleven input:focus ~ button.btn-search, .sample.twelve input:focus ~ button.btn-search {  animation: jumpTowardSearch 1.2s linear;  background: hotpink;  color: #fff;  left: 172px;}.sample.eleven input:focus ~ button.btn-reset, .sample.twelve input:focus ~ button.btn-reset {  animation: jumpTowardReset 1.2s linear .4s;  left: 202px;}.sample.eleven button, .sample.twelve button {  transition: all .6s ease-in-out;}.sample.eleven button.btn-search, .sample.twelve button.btn-search {  background: #ccc;  border-radius: 50%;  height: 26px;  left: 92px;  top: 2px;  width: 26px;}.sample.eleven button.btn-reset, .sample.twelve button.btn-reset {  background: #fff;  border: 1px solid #ccc;  border-radius: 50%;  font-size: 10px;  height: 20px;  left: 92px;  line-height: 20px;  padding: 0;  top: 5px;  width: 20px;  z-index: -1;}.sample.thirteen input, .sample.fourteen input {  background: none;  border-color: #000;  border-radius: 15px;  border-width: 0 0 1px;  transition: all .8s ease-in-out;  width: 30px;}.sample.thirteen input:focus, .sample.fourteen input:focus {  background: radial-gradient(ellipse at top left, rgba(0, 0, 0, 0) 65%, #ff69b4 140%);  border-radius: 0 15px 15px 0;  width: 250px;}.sample.thirteen input:focus ~ button.btn-search, .sample.fourteen input:focus ~ button.btn-search {  background: hotpink;  color: #fff;  left: 222px;  transform: rotate(720deg);}.sample.thirteen input:focus ~ button.btn-reset, .sample.fourteen input:focus ~ button.btn-reset {  left: 256px;  transform: rotate(360deg);}.sample.thirteen button, .sample.fourteen button {  transition: all .8s ease-in-out;}.sample.thirteen button.btn-search, .sample.fourteen button.btn-search {  background: #ccc;  border: 1px solid #000;  border-radius: 50%;  height: 30px;  left: 0;  width: 30px;}.sample.thirteen button.btn-reset, .sample.fourteen button.btn-reset {  background: #fff;  border: 1px solid #ccc;  border-radius: 50%;  font-size: 10px;  height: 20px;  left: 2px;  line-height: 20px;  padding: 0;  top: 10px;  width: 20px;  z-index: -1;}@keyframes bounceRight {  0% {    transform: translateX(0px);  }  50% {    transform: translateX(10px);  }  100% {    transform: translateX(0px);  }}@keyframes jumpTowardSearch {  0% {    background: #ccc;    opacity: 1;    transform: rotateZ(0deg) scale(1);  }  20% {    background: #ccc;    opacity: 0;    transform: rotateZ(-60deg) scale(50);  }  55% {    background: hotpink;    opacity: 0;    transform: rotateZ(-30deg) scale(100);  }  90% {    background: hotpink;    opacity: 0;    transform: rotateZ(-30deg) scale(50);  }  100% {    background: hotpink;    opacity: 1;    transform: rotateZ(0deg) scale(1);  }}@keyframes jumpTowardReset {  0% {    opacity: 0;    transform: rotateZ(0deg) scale(1);  }  20% {    opacity: 0;    transform: rotateZ(-60deg) scale(50);  }  55% {    opacity: 0;    transform: rotateZ(-30deg) scale(100);  }  90% {    opacity: 0;    transform: rotateZ(-30deg) scale(50);  }  100% {    opacity: 1;    transform: rotateZ(0deg) scale(1);  }}

   $(‘body‘)  .on(‘click‘, ‘div.three button.btn-search‘, function (event) {      event.preventDefault();      var $input = $(‘div.three input‘);      $input.focus();      if ($input.val().length() > 0) {          // submit form      }  })  .on(‘click‘, ‘div.four button.btn-search‘, function (event) {      event.preventDefault();      var $input = $(‘div.four input‘);      $input.focus();      if ($input.val().length() > 0) {          // submit form      }  })  .on(‘click‘, ‘div.five button.btn-search‘, function (event) {      event.preventDefault();      var $input = $(‘div.five input‘);      $input.focus();      if ($input.val().length() > 0) {          // submit form      }  })  .on(‘click‘, ‘div.six button.btn-search‘, function (event) {      event.preventDefault();      var $input = $(‘div.six input‘);      $input.focus();      if ($input.val().length() > 0) {          // submit form      }  })  .on(‘click‘, ‘div.seven button.btn-search‘, function (event) {      event.preventDefault();      var $input = $(‘div.seven input‘);      $input.focus();      if ($input.val().length() > 0) {          // submit form      }  })  .on(‘click‘, ‘div.eight button.btn-search‘, function (event) {      event.preventDefault();      var $input = $(‘div.eight input‘);      $input.focus();      if ($input.val().length() > 0) {          // submit form      }  })  .on(‘click‘, ‘div.thirteen button.btn-search‘, function (event) {      event.preventDefault();      var $input = $(‘div.thirteen input‘);      $input.focus();      if ($input.val().length() > 0) {          // submit form      }  })  .on(‘click‘, ‘div.fourteen button.btn-search‘, function (event) {      event.preventDefault();      var $input = $(‘div.fourteen input‘);      $input.focus();      if ($input.val().length() > 0) {          // submit form      }  })