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' ;
Sur un smartphone orientez l'écran 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
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
- Le code HTML ne présente aucune difficulté. Notez cependant que chaque image GIF a deux attributs :
- un attribut class pour la positionner
- un attribut id pour lui appliquer un modèle d'animation
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
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.