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

                                    
Vidéo background en html5 style02

Vidéo background en html5 style02

Vidéo background en html5 style01

Vidéo background en html5 style01

Titre section avec une anmation style01

Titre section avec une anmation style01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Pagination with Jquery

Pagination with Jquery

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Organization Chart

Organization Chart

Input range slider HTML style04

Input range slider HTML style04

Image hover 03

Image hover 03

Form Création de compte

Form Création de compte

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire