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

                                    
Arrows Defense Game

Arrows Defense Game

Blog post card 01

Blog post card 01

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Form Création de compte

Form Création de compte

Form contact avec validation en css

Form contact avec validation en css

Form login b4 01

Form login b4 01

Input file style01

Input file style01

Input range slider HTML style04

Input range slider HTML style04

Table bootstrap with Datatable

Table bootstrap with Datatable

input file récupérer le nom du fichier

input file récupérer le nom du fichier