Tutoriels ⇒ HTML5 CSS3 facebook twitter youtube

Les animations en CSS3 | Les animations en CSS3


Les animations en CSS3

La base

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

Plus simple à réaliser.

effet zoome css3

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

l’ombre et son animation.

effet de décollage css3

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

.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.

effet de rotation css3

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...*/

 

 

Légende coulissante

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

Coulissante effet de légende

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/1.jpg" width="200" height="125" />
		<figcaption>Titre 1 <span>Photos 1</span></figcaption>
	</figure>
</li>


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…

 

html :

 

 

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





>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces