"searche animate"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>CSS Animated Search Boxes</h1> <p>(with occasional help from javascript to assign focus)</p> <p>buttons don't actually function. all animations are triggered on the focus state of the input.</p> <p class="sample">JUST A SEARCH BUTTON...</p> <p class="sample">...WITH A RESET BUTTON</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> <script> $('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.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 } }) ; </script>
* { 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); } }

Related: See More


Questions / Comments: