Accueil

Tutoriel CSS - sommaire

Révisions CSS2

CSS - introduction CSS : les principes CSS2 : principales propriétés CSS2 et les tableaux HTML Les éléments 'block' ou boites La numérotation des balises 'titre' Feuille de style pour impression La propriété POSITION Exprimer les couleurs Les fichiers "spritesheet"

Nouveautés CSS3

Media queries pour responsive design Nouveaux sélecteurs : pseudo-classes et pseudo-éléments Boites avec angles arrondis voire ombrées Images découpées - propriété clip-path & shape-outside Le codage HSL et HSLA des couleurs Nouveaux effets pour le texte Dégradés linéaires et radiaux avec CSS
Les filtres avec CSS Le raccourci "background" enrichi Le multicolonnage Révolution dans le positionnement : grid layout & flexbox Feuille de style avec des variables Intérêt du codage RGBA ou HSLA

Transformations, transitions & animations

Les transformations 2D Les transitions Transformations 2D avec transition Les transformations 3D - principes Transformations 3D avec transition Premières animations CSS Animer des transformations 2D ou 3D Une animation 3D complexe

Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

CSS : animer des transformations 2D ou 3D

Rien n'interdit de créer des modèles d'animation basées sur des transforamtions 2D ou 3D.

Attention les zones d'animation de cette page ne sont pas 'responsive' ; orientez la tablette en mode paysage.

Animer des transformations 3D - exemple

Les cartes subissent entre autres une rotation sur l'axe X de 180 degrés. Aussi elles apparaissent inversées un moment.

Le code CSS correspondant

#container {width : 900px ; height : 400px ; perspective : 800px ; perspective-origin : top center; 
	margin : auto; }
@keyframes anim_cartes
	{ 
		0% {}
		50% {transform : translateZ(-200px) rotateX(180deg);}
		100% {transform : translateZ(200px) rotateX(-180deg);}
	}
.carte {margin : 1% ; width : 25%; height : auto; 
	animation : anim_cartes 10s 0s infinite linear alternate ;  }

Je définis une modèle d'animation identifié anim_cartes.
J'applique cette animation aux images contenues dans "container".

Le code HTML

<div id ="container"> <img src="../images/as_coeur.jpg" class ="carte" /> <img src="../images/as_pique.jpg" class ="carte" /> </div>

On ne peut plus simple ...

Animer des transformations 2D - premier exemple

Les skieurs se déplacent vers la droite tout en s'éloignant puisqu'ils apparaissent de plus en plus petits.

Les fondeurs se déplacent vers la droite et vers le fond. Dans une première étape, leur taille diminue car ils s'éloignent de l'oeil puis dans un deuxième temps ils se rapprochent et leur taille augmente.

Le code CSS

#container2 {width : 900px ; height :500px ; 
	background-image :url(../images/paysage_hiver3.jpg) ; margin :auto;  
	background-size : cover ;  position : relative ;}
.fondeur {position :absolute ; left : 0px ; height : 50px; width : auto; }
#fondeur1 {top : 400px ;}
#fondeur2 {top : 450px ; }
@keyframes deplacer_fondeurs 
	{
		0%{}
		50% {transform : translateX(400px) translateY(-100px) scale(.6) }
		100%{transform : translateX(800px) translateY(50px) scale(1.2) ;}
	} 
#fondeur1 {animation : deplacer_fondeurs 18s 0s infinite linear ; }
#fondeur2 {animation : deplacer_fondeurs 16s 2s infinite linear ; }

Notez l'utilisation de la propriété background-size pour que l'image de fond s'ajuste à la taille de la boîte 3D.
La zone d'animation n'est pas "responsive" (largeur exprimée en pixels) et elle n'est que 2D mais cependant il y a un effet de perspective grâce au changement d'échelle appliqué aux "sprites".

Le code HTML

<div id ="container2"> <img src ="../images/fondeur.gif" class ="fondeur" id ="fondeur1"/> <img src ="../images/fondeur2.gif" class ="fondeur" id ="fondeur2" /> </div>

Animer des transformations 2D - deuxième exemple

Cliquez sur le bouton de commande pour faire atterrir l'avion.
Pour que l'avion retrouve sa taille et position initiales, il suffit d'actualiser la page.

Dès que vous cliquez sur le bouton de commande (situé sous la zone d'animation) l'avion entame sa procédure d'atterrisage.
Notez qu'il doit corriger brutalement sa trajectoire pour ne pas atterrir hors de la piste.
Plus il approche et plus il apparait grand.
La zone n'étant que 2D, l'effet de perspective est rendu grâce au changement d'échelle (commande scale) appliqué au "sprite"

Le code CSS

#container3 {width : 900px ; height : 500px ; background-image :url(../images/piste.svg) ; margin : auto;
	background-size : cover ; position : relative ;}
@keyframes atterrir 
	{ 
		0% {}
		50% {transform : translateX(300px) translateY(200px) scale(1.5);}
		to {transform : translateX(400px) translateY(400px) scale(3);}
	}
#jet {position : absolute; left : 0px ; top : 0px; height : 40px ; 
	width : auto; animation : atterrir 16s 0s 1 linear forwards paused ; }

Le "background" de la boite "container3" est une image vectorielle : piste.svg. Les navigateurs manipulent désormais les images SVG commes les images matricielles (png, jpg, gif).
Notez que la zone d'animation n'est pas "responsive.

Le code HTML

<div id ="container3"> <img src="../images/avion.svg" id ="jet" /> <button onclick ="go()">faites atterrir le jet</button> </div>

Le "sprite" est aussi une image SVG !

En cliquant sur le bouton de commande appel de la fonction "go".

Le script

	var avion = document.querySelector("#jet"); 
	function go()
	{
		avion.style.animationPlayState ="running" ;
	}

Avec la fonction "go" l'animation relative à l'image identifiée "jet" démarre.

Le code du fichier piste.svg

Il s'agit également d'un fichier d'image vectorielle mais cette fois le code SVG n'a pas été saisi mais généré par le logiciel Inkscape.
Comme il s'agit d'un code généré il n'est pas toujours facile à comprendre ...
Il existe aussi dans mon site un tutoriel sur cet éditeur de SVG via une interface graphique.