Creating captivating animations using CSS and HTML input

Question

Creating captivating animations using CSS and HTML input

I am currently in the process of building a website and I am interested in adding an animated search feature to it. I came across this animation that has caught my attention:

https://videohive.net/item/search-logo-reveal/19279469?s_rank=149

. I was wondering if there is a way for me to incorporate something similar into my own site. Here is the code I have been working on: https://jsfiddle.net/4txmdqhx/. Please note that there may be some optimization errors as I am still new to this.

Thank you!

jquery html css animation

Answer 1

Answer №1

$('.custom-input input,.custom-input textarea').focus(function() {
    $(this).parent().addClass('active');
});

$('.custom-input input,.custom-input textarea').blur(function() {
    $(this).parent().removeClass('active');
});

<style>
.active {
  color:blue;   
}
.custom-input {
position: relative;
margin: 30px 0;
}
.custom-input label {
position: absolute;
top: 5px;
left: 10px;
padding:5px;
}

.custom-input.active label {
top: -25px;
left: 10px;
/*background: #ffffff;*/
}
.custom-input input[type="text"] {
padding-left: 80px;
}
.custom-input textarea {
padding-left: 80px;
}
.custom-input.active textarea, 
.custom-input.active input[type="text"] {
padding-left: 10px;
}
textarea,
input[type="text"] {
padding: 10px;
width: 100%;
}
textarea,
input,
.custom-input.active label,
.custom-input label {
-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">
<div class="row">
    <form>
        <div class="custom-input">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Email :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Number :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Message :</label>
            <textarea cols="10" rows="5"></textarea>
        </div>
    </form>
    </div>
</div>

Answer 2

$('.custom-input input,.custom-input textarea').focus(function() {
    $(this).parent().addClass('active');
});

$('.custom-input input,.custom-input textarea').blur(function() {
    $(this).parent().removeClass('active');
});

<style>
.active {
  color:blue;   
}
.custom-input {
position: relative;
margin: 30px 0;
}
.custom-input label {
position: absolute;
top: 5px;
left: 10px;
padding:5px;
}

.custom-input.active label {
top: -25px;
left: 10px;
/*background: #ffffff;*/
}
.custom-input input[type="text"] {
padding-left: 80px;
}
.custom-input textarea {
padding-left: 80px;
}
.custom-input.active textarea, 
.custom-input.active input[type="text"] {
padding-left: 10px;
}
textarea,
input[type="text"] {
padding: 10px;
width: 100%;
}
textarea,
input,
.custom-input.active label,
.custom-input label {
-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">
<div class="row">
    <form>
        <div class="custom-input">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Email :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Number :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="custom-input">
            <label>Message :</label>
            <textarea cols="10" rows="5"></textarea>
        </div>
    </form>
    </div>
</div>

Answer 3

Answer №2

Give this method a try

.searchbar{
width: 180px;
height: 26px;
animation-name: searchbar-animation;
animation-duration: 6s;
}   
@keyframes searchbar-animation{
0%{width: 0px;}
25%{width: 45px;}
50%{width: 90px;}
75%{width: 135px;}
100%{width: 180px;}
 }

You have the flexibility to adjust the width, height, and animation duration as per your requirements.

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

Answer 4

Give this method a try

.searchbar{
width: 180px;
height: 26px;
animation-name: searchbar-animation;
animation-duration: 6s;
}   
@keyframes searchbar-animation{
0%{width: 0px;}
25%{width: 45px;}
50%{width: 90px;}
75%{width: 135px;}
100%{width: 180px;}
 }

You have the flexibility to adjust the width, height, and animation duration as per your requirements.

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

Answer 5

Answer №3

Give this a shot, with an added border that you can customize to your preference

.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;}
 }

Also,

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

Answer 6

Give this a shot, with an added border that you can customize to your preference

.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;}
 }

Also,

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

Creating captivating animations using CSS and HTML input

Answer №1

Answer №2

Answer №3

Similar questions

trigger a border hover effect on an HTML element

The accuracy of VW and VH units is questionable

Using JSTL tags may result in returning null or empty values when making Javascript calls or populating HTML

Dealing with complications in the Rails asset pipeline management

Any ideas on how I can use PHP or JavaScript to repeatedly execute a segment of HTML code?

Utilizing Multiple Columns for Labels in Twitter Bootstrap

Text appearing in varying sizes across browsers

The continuation of unraveling the mystery of utilizing `overflow-y:scroll` in a horizontal slider

Preventing scrolling on a YouTube video embed

Ways to improve the quality of a blurred photo

Switch a div to a computed location

Encountering difficulty selecting a dropdown sub-menu using Selenium WebDriver

jQuery's simple scrolling feature is currently not functioning as intended

Experiencing odd behavior with my Dash App when using CSS grid on it

What could be causing the compatibility issue between fr units and grid-template-rows in CSS grid?

Choosing JavaScript

After the URL of the window was updated, the local storage was automatically cleared

Prevent multiple sliding menu animations - .stop()

Performing two API calls using Jquery to fetch distinct dynamic elements within two nested $.each loops

Sticky sidebar that adjusts to viewport size in a responsive layout