CSS HTML-Animation mit Eingabe

Question

Ich entwickle eine Website und wollte eine animierte Suche darauf ... Ich habe diese Animation wirklich genossen: https://videohive.net/item/search-logo-reveal/19279469?s_rank=149 Und ich frage mich, ob es irgendeinen Weg gibt, ich kann es tun. Mein Code hier: https://jsfiddle.net/4txmdqhx/ Mit einigen Optimierungsfehlern, weil ich noch fange.

Danke!

Answer 1

es auf diese Weise

.searchbar{ 
width: 200px; 
height: 24px; 
animation-name: searchbar; 
animation-duration: 5s; 
} 
@keyframes searchbar{ 
0%{width: 0px;} 
20%{width: 40px;} 
40%{width: 80px;} 
60%{width: 120px;} 
80%{width: 160px;} 
100%{width: 200px;} 
} 

Sie Breite nach Ihren Bedürfnissen aswell wie Höhe und Animationsdauer Versuchen anpassen können.

<form>  
<input class="searchbar" 
type="text" value="enter text here"> 
</form> 
</div> 

Answer 2

die Sie interessieren, enthalten Sie die Farbe ändern nach Ihnen

.searchbar{ 
width: 200px; 
height: 24px; 
animation-name: searchbar; 
animation-duration: 5s; 
border: 2px solid; 
} 
@keyframes searchbar{ 
0%{width: 0px; 
border-top-color: green;} 
20%{width: 40px; 
border-right-color: red;} 
40%{width: 80px; 
border-bottom-color: gold;} 
60%{width: 120px; 
border-left-color: blue;} 
80%{width: 160px; 
border-top-color: pink;} 
100%{width: 200px;} 
} 

Und das

<input class="searchbar" 
type="text" value="enter text here"> 
</form> 

Answer 3

$('.form-fild input,.form-fild textarea').focus(function() { 
 
    $(this).parent().addClass('open'); 
 
}); 
 

 
$('.form-fild input,.form-fild textarea').blur(function() { 
 
    $(this).parent().removeClass('open'); 
 
});

<style> 
 
.open { 
 
    color:red; 
 
} 
 
.form-fild { 
 
\t position: relative; 
 
\t margin: 30px 0; 
 
} 
 
.form-fild label { 
 
\t position: absolute; 
 
\t top: 5px; 
 
\t left: 10px; 
 
\t padding:5px; 
 
} 
 

 
.form-fild.open label { 
 
\t top: -25px; 
 
\t left: 10px; 
 
\t /*background: #ffffff;*/ 
 
} 
 
.form-fild input[type="text"] { 
 
\t padding-left: 80px; 
 
} 
 
.form-fild textarea { 
 
\t padding-left: 80px; 
 
} 
 
.form-fild.open textarea, 
 
.form-fild.open input[type="text"] { 
 
\t padding-left: 10px; 
 
} 
 
textarea, 
 
input[type="text"] { 
 
\t padding: 10px; 
 
\t width: 100%; 
 
} 
 
textarea, 
 
input, 
 
.form-fild.open label, 
 
.form-fild label { 
 
\t -webkit-transition: all 0.2s ease-in-out; 
 
     -moz-transition: all 0.2s ease-in-out; 
 
     -o-transition: all 0.2s ease-in-out; 
 
      transition: all 0.2s ease-in-out; 
 
} 
 
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t <div class="row"> 
 
    \t <form> 
 
     <div class="form-fild"> 
 
      <label>Name :</label> 
 
      <input type="text"> 
 
     </div> 
 
     <div class="form-fild"> 
 
      <label>Email :</label> 
 
      <input type="text"> 
 
     </div> 
 
     <div class="form-fild"> 
 
      <label>Number :</label> 
 
      <input type="text"> 
 
     </div> 
 
     <div class="form-fild"> 
 
      <label>Name :</label> 
 
      <input type="text"> 
 
     </div> 
 
     <div class="form-fild"> 
 
      <label>Name :</label> 
 
      <input type="text"> 
 
     </div> 
 
     <div class="form-fild"> 
 
      <label>Message :</label> 
 
      <textarea cols="10" rows="5"></textarea> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>