Créer une input search animée

<!DOCTYPE html>
<html>
<head>
	<title>CRÉER UNE INPUT SEARCH ANIMÉE | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="CRÉER UNE INPUT SEARCH ANIMÉE">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container mt-5 mb-5">
		<div class="row text-center mx-auto">
			<input class="form-control" type="search" name="search" placeholder="Chercher..">
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
</body>
</html>
input[type=search] {
    width: 150px;
    -o-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
}

input[type=search]:focus {
  width: 100%;
}

                                    
input file récupérer le nom du fichier

input file récupérer le nom du fichier

Timeline style03

Timeline style03

SwiperJS style01

SwiperJS style01

Pie Charts

Pie Charts

Organization Chart

Organization Chart

Input range slider HTML style02

Input range slider HTML style02

Form login et créer un compte style01

Form login et créer un compte style01

Form login b4 01

Form login b4 01

Form login 03

Form login 03

Carousel Bootstrap4

Carousel Bootstrap4

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Alert Bootstrap4 style02

Alert Bootstrap4 style02