Développer une animation en CSS3 Un formulaire qui clignote en CSS3

1. L'objectif

Nous souhaitons mettre en évidence un formulaire dans une page Web en faisant clignoter son contour. Ce n'est pas très "design", mais c'est pour l'exemple !

2. La structure du formulaire

Créez un formulaire tout ce qu'il y a de plus classique :

<form id="inscription" method="#" action="#">
  <p>
    <label for="nom">Votre nom : </label>
    <input type="text" id="nom" />
  </p>
  <p>
    <label for="email">Votre eMail : </label>
    <input type="email" id="email" />
  </p>
  <p>
    <input type="submit" id="envoi" value="Envoyer" />
  </p>
</form>

3. La mise en forme

Le formulaire est mis en forme avec des CSS3 classiques :

#inscription {
  width: 300px;
  padding: 10px;
  border: 1px solid #333;
  border-radius: 10px;
}

4. L'animation

Pour faire clignoter son contour, nous allons ajouter une ombre au formulaire qui passera du rouge au jaune !

Nous créons une animation nommée ombre. La première étape à 0 % propose une ombre de 15 pixels rouge, et à 100%, une ombre jaune.

@-webkit-keyframes ombre {
  0% {
    box-shadow: 0 0 15px red;
  }
  100% {
    box-shadow: 0 0 15px yellow;
  }
}
@-moz-keyframes ombre {
  0% {
    box-shadow: 0 0 15px red;
  }
  100% {
    box-shadow: 0 0 15px yellow;
  }
}
@keyframes ombre {
  0% {
    box-shadow: 0 0 15px red;
  }
  100% {
    box-shadow: 0 0 15px yellow;
  }
}

Nous appliquons cette animation au formulaire. L'animation utilise une cinétique ease-in (accélération en fin), elle est sans fin (infinite), elle alterne le sens de l'animation (alternate) et dure 500 millisecondes (500ms).

#inscription {
  width: 300px;
  padding: 10px; 
  border: 1px solid #333;
  border-radius: 10px;
  /* Animation */
  -webkit-animation: ombre ease-in infinite alternate 500ms;
  -moz-animation: ombre ease-in infinite alternate 500ms;
  animation: ombre ease-in infinite alternate 500ms;
}

5. L'affichage

Voici le résultat obtenu : imaginez que cela "clignote" et que cela "pique les yeux" !