Editions ENI Livres | Vidéos | e-Formations
Les animations CSS3
L’état des lieux et l’objectif
Le module des animations a pour objectif de créer des animations dans vos pages web sans JavaScript ni aucun framework de type jQuery, MooTools ou Dojo.
Ce court module Animation est toujours en Working Draft au 11 octobre 2018 : https://www.w3.org/TR/css-animations-1/
Le site Can I use (http://caniuse.com/) nous indique que ce module est très bien reconnu.
Les possibilités de ce module sont très importantes et son objectif pourrait être tout simplement de faire concurrence à la technologie Adobe Flash ! Sans entrer dans un débat technologique hors propos par rapport à ce livre, n’oubliez pas que pour des raisons techniques, Apple n’autorise pas les animations Flash dans ses iPhone et iPad.
La solution sera donc les animations en CSS3 !
Ce module offre de très grandes possibilités de création, dès qu’il sera mieux reconnu par les navigateurs ; vous trouverez dans les mois à venir de nombreux exemples sur le Web.
La construction d’une animation
Les animations se déroulent dans le temps. Le temps est géré par les « images-clés », les keyframes en anglais. Une image-clé, une keyframe est une étape dans une animation où l’élément animé opère un changement.
C’est la règle @keyframes qui gère les étapes de votre animation. Chaque animation doit avoir une règle @keyframes nommée.
Vous devrez déterminer les différentes étapes de votre animation et y indiquer les changements à apporter aux différentes propriétés. Chaque étape pourra être identifiée avec une valeur de pourcentage, 100 % étant la durée totale de l’animation.
Avec la propriété animation-duration vous pourrez indiquer combien de temps doit durer l’animation.
La cinétique de l’animation est gérée par la propriété animation-timing-function. Vous pourrez avoir des accélérations et des ralentissements à l’identique de ce que nous avons vu pour les transitions.
Ensuite, vous pourrez indiquer combien de fois doit se répéter cette animation. C’est la notion d’itération. C’est la propriété animation-iteration-count qui va permettre de l’indiquer.
La propriété...
Un simple déplacement
1. L’objectif
Nous voulons déplacer, sans fin, une boîte <div> de gauche à droite, puis de droite à gauche.
2. La structure
Créez une boîte <div> identifiée #boite.
<div id="boite"><p> </p></div> Avec une mise en forme très simple :
#boite {
background-color: red;
position: relative;
width: 100px;
height: 100px;
} 3. L’animation
La boîte rouge doit aller à une position fixée à la moitié de la durée totale, puis revenir à sa position initiale à la fin de l’animation. Il y aura donc trois keyframes : à 0 %, 50 % et 100 %.
À chaque étape vous indiquerez la position à atteindre avec la propriété left. L’animation est nommée redBox.
@-webkit-keyframes redBox {
0% {
left: 10px;
}
50% {
left: 400px;
}
100% {
left: 10px;
}
}
@-moz-keyframes redBox {
0% {
left: 10px; ...Une rotation et une transparence
1. L’objectif
Nous allons créer une animation dans laquelle une image tourne sur elle-même et devient transparente.
2. La structure
Créez une boîte <div> identifiée.
<div id="image"><img src="lion.jpg" alt="" /></div> Appliquez-lui une position absolue.
#image {
position: absolute;
left: 400px;
top: 300px;
} 3. L’animation
L’image doit devenir transparente : nous allons utiliser la propriété opacity.
L’image doit tourner sur elle-même : nous allons utiliser la propriété transform.
@keyframes tourne {
0% {
opacity: 1;
transform: rotate(0deg);
}
100% {
opacity: 0;
transform: rotate(360deg);
}
} Dans le sélecteur de la boîte, appliquez cette animation :
#image {
position: absolute;
left: 400px;
top: 300px;
animation: tourne 5s infinite;
} 4. L’affichage
Voilà le résultat attendu :
Un formulaire qui clignote
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...
Une fenêtre modale
1. L’objectif
Nous allons créer une fenêtre modale. Une fenêtre modale est une fenêtre qui apparaît dans la page web, au-dessus du contenu courant, que l’on peut fermer par un clic de souris.
Cet exemple est tiré du site de Paul Hayes : https://www.paulrhayes.com/css-modal/
2. Le bouton
La fenêtre modale va apparaître au clic d’un bouton.
Dans un premier temps, dans la page HTML, créez un lien a pour le bouton. Ce lien utilise une classe nommée openModal.
<p><a href="#example" class="openModal">Ouvrir la fenêtre modale</a></p> La mise en forme est libre. Voilà le style proposé :
a.openModal {
margin: 1em auto;
display: block;
width: 200px;
background: #ccc;
text-align: center;
text-decoration: none;
color: black;
padding: 10px;
border-radius: 7px;
text-shadow: 0 1px 0 #fff;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
} Voilà l’affichage du bouton :
3. La fenêtre modale
La fenêtre modale est un élément aside qui possède comme identifiant example et qui utilise la classe modal. L’identifiant est important, car nous utiliserons la pseudo-classe target sur cet identifiant.
Le titre du contenu est un élément h2 et le texte du contenu un élément p. Le bouton de fermeture est un lien qui possède lui aussi un identifiant close et un title dont le libellé est close.
<aside id="example" class="modal">
<div>
<h2>Modal box</h2>
<p>Integer posuere...</p>
<a href="#close" title="Close">Fermer</a>
</div>
</aside> Voici la mise en forme en CSS proposée par l’auteur. Vous notez comme propriétés CSS3 : des coins arrondis (border-radius), une ombre portée (box-shadow), un dégradé (linear-gradient) et une ombre portée sur le texte...
