Quelques idées d’animations simples en CSS3 avec la propriété transition

Depuis l’arrivée des animations en CSS sur les différents navigateurs du marché, de nouvelles possibilités sont offertes aux webdesigners.
En comptant certaines propriétés de mise en style déjà reconnues par la plupart d’entre eux depuis des mois, il est facile d’imaginer
de petites animations pour agrémenter vos sites et offrir une meilleure expérience utilisateur à vos visiteurs.
Vous trouverez sur cette page de démonstration d’animations en CSS3, quelques exemples d’animations que je vais vous décrire ici, mais il n’y a rien de bien sorcier, il suffit de trouver l’idée.

Les animations en CSS3

La base

Dans un premier temps, lorsque vous devez animer un élément, il faut préciser dans quelles conditions (les paramètres) grâce à la propriété raccourcie transition de CSS3.

.animated {
transition: all 0.7s ease-out;
}

Avec cette déclaration vous prévoyez une animation sur all pour une durée d’animation de 0,7 secondes sur un effet ease-out.
L’effet est optionnel, les deux autres paramètres sont indispensables et peuvent être différents, exemple :

.animated {
transition: width 700ms;
}

Ici nous prévoyons de n’animer que la largeur de l’élément sur une durée définie en millisecondes.

Voici la structure de base que j’utilise :

<ul class="exemple ex1">
	<li><a href="#">Block 1</a></li>
	<li><a href="#">Block 2</a></li>
	<li><a href="#">Block 3</a></li>
</ul>

J’utilise la classe exN pour une question de pratique dans la démonstration 😉

Concernant l’aspect des éléments de la démonstration, voici le code, mais libre à vous d’utiliser celui qui vous convient le mieux :

li {
	display: inline;
}
li a {
	display: inline-block;
	height: 85px;
	width: 75px;
	text-align: center;
	background: white;
	padding: 5px 10px;
	margin: 0 20px;
	color: #615334;
	text-decoration: none;
	line-height: 5.6em;
	background: -moz-linear-gradient(center bottom , #DACDB1 11%, #F0E8D8 56%) repeat scroll 0 0 #F0E8D8;
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #DACDB1),color-stop(0.65, #F0E8D8));

	-moz-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47;
	-webkit-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47;
	box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47;
	-moz-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

C’est le code utilisé pour tous les exemples qui vont suivre ensuite, avec quelque variantes de temps en temps.
Je précise ici les propriétés préfixées (-moz, -webkit), mais pour alléger les prochains codes, je me contenterai de celle sans préfixe, à vous de les rajouter.

L’effet zoom

L’effet zoom est le plus simple à réaliser.
Sur la version proposée par la démonstration, j’ai corsé un peu la chose en offrant une ombre à mon élément.

Cette ombre portée va elle aussi subir des modifications pour rendre l’animation réaliste.

.ex1 a:hover,
.ex1 a:focus {
	transform: scale(1.2);
	box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 15px #b6a684;
}

Nous utilisons simplement la propriété transform pour effectuer un zoom (scale). La valeur renseignée est un coefficient multiplicateur.
L’ombre portée est diffusée davantage et légèrement éclaircie.

L’effet de décollage

Cet effet met en avant une difficulté certaine : l’ombre et son animation.

La base

Bien, dans un premier temps on va légèrement modifier notre base :

.ex2 a {
	position: relative;
	top: 0;
	box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 2px #816F47;
	transition: all 0.3s ease-in;
}

Nous avons ici une ombre un peu moins importante, et un effet d’accélération dans l’animation.
De plus nous plaçons notre élément en position relative et déclarons un top à 0 pour prévoir l’animation à venir.

Création de l’ombre

Pour ceux qui ont suivi mon tutoriel sur les ombres avancées en CSS3, vous connaissez déjà la technique. Pour les autres, si cet effet qui va suivre vous intéresse, je vous invite grandement à aller lire ce tutoriel.

.ex2 a:before {
	content: ' ';
	position: absolute;
	bottom: -1px; left: 0;
	width: 100%;
	height: 6px;
	background: #9b885e;
	box-shadow: 0 0 5px #9b885e,0 0 5px #9b885e,0 0 5px #9b885e;
	border-radius: 90px/20px;
	z-index: -1;
	transition: all 0.3s ease-in;
}

Grâce au pseudo-élément :before, nous construisons notre ombre portée. La répétition de la même box-shadow me permet d’intensifier l’ombre pour créer un flou.
Enfin, nous prévoyons aussi une transition sur cet élément, une transition de mêmes caractéristiques que précédemment.

L’animation

Dans un premier temps, super simple : on décale en hauteur le bloc :

.ex2 a:hover,
.ex2 a:focus {
	top: -10px;
}

Ensuite, plus compliqué : nous allons décaler inversement l’ombre, l’élargir et la diminuer en hauteur légèrement, puis modifier sa couleur vers une plus claire.

.ex2 a:hover:before,
.ex2 a:focus:before {
	bottom: -11px;
	left: -3px;
	width: 106%;
	height: 4px;
	background: #bcae8f;
	box-shadow: 0 0 9px #bcae8f,0 0 9px #bcae8f,0 0 9px #bcae8f,0 0 9px #bcae8f,0 0 9px #bcae8f;
}

Et voilà, notre effet est prêt.
Suivant !

L’effet de rotation

Pour éviter de nous retrouver avec un texte qui tourne, je me suis décidé à faire tourner un élément devant le texte, plus discret et moins lourd, quand même.

Mais comme je n’aime pas les choses simples, la flèche est construite avec des span et du CSS…
La code HTML d’un élément de liste sur les trois :

<li>
	<a href="#">
		<span class="arrow">
			<span class="mask1"></span>
			<span class="mask2"></span>
			<span class="mask3"></span>
		</span>
		Block 1
	</a>
</li>

La flèche, en CSS

A partir de notre span.arrow composé de trois autres span, nous pouvons créer une flèche.
Les limites de cette technique : le temps, le nombre d’élément, le besoin d’avoir une couleur plutôt unie en fond d’élément.

.arrow {
	position: relative;
	top: 1px;
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-right: 8px;
	margin-left: 0px;
	background: #6a8b9a;
	background: -moz-linear-gradient(90deg,#225872,#225872,#6a8b9a,#6a8b9a);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #6a8b9a), color-stop(0.50, #6a8b9a), color-stop(0.51, #225872), color-stop(1.00, #225872));
	background-repeat: no-repeat;
}

Nous avons un carré avec un dégradé en fond.
Maintenant nous allons cacher des parties de ce carré pour obtenir une flèche :

.arrow span {
	position: absolute;
	width: 8px;
	height: 9px;
	background: #d4c7ab;
	/*rotation des masques pour créer l'effet de flèche*/
	transform: rotate(45deg);
}
/*réglage au cas par cas*/
.arrow .mask1 { top: 1px; left: -5px; }
.arrow .mask2 { top: -5px; right: -4px; background: #d7caaf; }
.arrow .mask3 { right: -4px; bottom: -5px; height: 10px; background: #d3c7a9; }

L’animation

Une petite retouche de hauteur, et on s’occupe de l’animation :

/*petit réglage de hauteur pour le lien*/
.ex3 a { height: 30px; line-height: 25px; }
/*style de l'animation*/
.arrow {
	transition: all 0.7s;
}
.ex3 a:hover .arrow,
.ex3 a:focus .arrow {
	transform: rotate(360deg);
}
/*vachement compliqué, j'avoue...*/

Je vous passe l’explication… ?

Vous l’aurez compris, sans l’étape de création de la flèche, avec un simple PNG à la place par exemple, notre code est super simple.

Légende coulissante

Je n’ai pas trouvé d’autre nom, la version anglaise (Sliding Legend) a plus de classe quand même !

Bref, passons !

Le code HTML

Le code HTML est largement modifié pour cet effet, il s’agit toujours d’une liste, dont voici un élément type :

<li>
	<figure tabindex="0">
		<img alt="" src="img/img1.jpg" width="200" height="125" />
		<figcaption>Lorem ipsum dolor<span>sit amet, consectetuer adipiscing</span></figcaption>
	</figure>
</li>

Il s’agit d’éléments HTML5, si vous n’êtes pas familiers avec ces éléments vous pouvez très bien les remplacer par des div avec les classes correspondantes (.figure, .figcaption).
Le tabindex nous permet de rendre focusable la figure, et donc d’agir dessus avec CSS tout comme on le fait dans la condition :hover. Si votre figure se trouve dans un lien, le problème de tabindex ne se pose pas.

La base CSS

Nous devons aussi modifier la base CSS :

.ex4 li {
	display: inline-block;
	width: 200px;
	margin: 0 10px;
	padding: 5px;
	box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47;
}
.ex4 figure {
	position: relative;
	display: inline-block;
	width: 200px;
	height: 125px;
	margin: 0;
	text-align: center;
	overflow: hidden;
}
.ex4 figcaption {
	position: absolute;
	left: 0; bottom: -1em;
	width: 200px;
	height: 2.6em;
	line-height: 1.5em;
	text-align: center;
	color: #fff;
	background: rgba(0,0,0,0.6);
	overflow: hidden;
	/*préparation de la transition*/
	transition: all 0.7s;
}
.ex4 figcaption span { display: block; }

Le conteneur est positionné en relative et la légende en absolute afin de permettre un positionnement aisé de la première ligne de la légende. Le contenu débordant est caché.
Pour le reste, c’est du style (quasiment).

L’animation

Voici les détails de l’animation : on affiche le reste du texte (estimé à une seule et unique ligne) et on noirci davantage le fond en transparence de la légende.

.ex4 figure:hover figcaption,
.ex4 figure:focus figcaption {
	height: 4.2em;
	background: rgba(0,0,0,0.8);
}

Conclusion…

Je ne sais pas s’il doit y avoir une conclusion, mais globalement on peut retenir que :

• définir all dans la propriété transition permet une meilleure facilité de maintenance, mais c’est peut-être plus gourmand en ressources
• on peut faire des animations sur la couleur (texte et fond), sur l’opacité, sur la hauteur de ligne, sur les dimensions, sur les marges extérieures et intérieures, sur les ombres portées, etc.
• CSS3 c’est fun, au pire en solution de replis pour les vieux machins ça ne s’anime pas
• il faut proposer les animations en surcouche de styles de base solides (d’ailleurs, préférez un display:block et un float:left à un inline-block sur les li)

Voir la démonstration

Enjoy !
Et n’hésitez pas à nous présenter vos essais !