Traduction
Tutoriel CSS3 - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Nous avons vu les transitions en CSS. Une transition n'autorise que le passage progressif pour un élément d'un état initial à un état final.
Mais si on veut qu'un élément passe de façon fluide (ou saccadée) de l'état 1 à l'état 2 puis à l'état 3 jusque l'état N. Il faut alors produire une animation.
Pendant longtemps les animations d'éléments HTML étaient réalisées via JavaScript. Mais grâce à la version 3 de CSS, il est possible de programmer facilement des animations en CSS.
La règle CSS3 @keyframes permet de définir un "modèle" d'animation avec de nombreuses étapes.
Ensuite ce "keyframes" peut être appliqué de façon personnalisée à différents éléments HTML via le raccourci animation
(ou via les 8 propriétés préfixées "animation-".
Les animations proposées dans ce chapitre sont 2D. Vous verrez dans une autre page que l'on peut aussi réaliser des animations avec l'illusion de la 3D.
Deux boules se déplacent sur le billard. La boule blanche démarre après la boule rouge mais est plus rapide que la rouge.
Les collisions ne sont pas gérées !
La boite "billard" n'est pas 3D mais l'animation a cependant un peu de relief grâce aux ombres portées.
Une boite identifiée billard contient deux DIV identifiés respectivement rouge et blanche.
Ces deux éléments DIV ont la forme de ronds ...
#billard {position : relative ; width :100% ;
height : 110px; margin : 10px ;
border : 4px solid brown; background : lime ;
box-shadow : 10px 10px 10px gray ;
border-radius : 5px;}
@keyframes deplace
{
0% {top : 0px ; left : 0% ; }
25% {top : 90px ; left : 50% ; }
50% {top : 0px ; left : 100% ; }
75% {top : 90px ; left : 50% ; }
100% {top : 0px ; left : 0% ; }
}
.boule {position : absolute ; width : 16px ;
height : 16px ; border-radius :8px ;
box-shadow : 4px 4px 4px gray ;}
#rouge{background : red;
animation : deplace 20s 0s infinite linear;}
#blanche{background : white ;
animation : deplace 16s 2s infinite linear; }
Observons attentivement les différentes règles de style !
#billard {position : relative ;width : % ; height : 100px ; margin : 10px auto 10px auto; ... } : On dessine un billard centré dans la page. Afin de pouvoir appliquer le positionnement absolu aux "enfants" de "billard" (les boules), cette boite est positionnée est elle aussi positionnée (ici en relatif).
.boule {position : absolute ; width : 16px ; height : 16px ; border-radius :8px ;box-shadow : 4px 4px 4px gray ;} : grâce à cette classe appliquée à des DIV, je dessine des boules ombrées.
@keyframes deplace { ... } : on définit un modèle d'animation appelé deplace
Ce modèle d'animation comprend 5 étapes.
Examinons la première étape.
0% {top : 0px ; left : 0% ; } : Chaque règle commence par un pourcentage en guise de sélecteur suivi par des paires de propriétés et valeurs ; puisque la largeur du conteneur étant exprimée en %, le left doit aussi être exprimé en %.
#rouge{background : red; animation : deplace 10s 0s infinite linear;} :
on remplit l'élément identifié rouge de cette couleur et on applique le modèle d'animation deplace à cet objet.
L'animation deplace durera pour cet objet 10 secondes, démarre à 0 secondes après le chargement de la page, se répète à répétée à l'infini
avec une progression linéaire (ou vitesse constante).
#blanche{background : white ;animation : deplace 8s 2s infinite linear; } :
on applique la règle d'animation deplace à l'objet identifié blanche (boule blanche).
L'animation deplace durera pour cet objet 8 secondes, démarre 2s secondes après le chargement de la page, se répète à l'infini et
le rythme de la progression est linéaire.
La vitesse de déplacement de la boule rouge est constante ce qui n'est guère le cas de la boule verte qui se déplace très vite
dans les horizontales mais très lentement dans les verticales.
Pourquoi ???
@keyframes tour_ok
{
0%{top :0px; left: 0px; }
40% {top :0px; left: 890px;}
50% {top : 220px ; left :890px;}
90% {top : 220px;left :0px; }
100% {top :0px; left :0px;}
}
@keyframes tour_bug
{
0%{top :0px; left: 0px; }
25% {top :0px; left: 890px}
50% {top : 220px ; left :890px;}
75% {top : 220px;left :0px; }
100% {top :0px; left :0px;}
}
.boule
{
width: 16px;
height:16px ;
border-radius: 8px;
position : absolute ; top: 0px ; left : 0%;
box-shadow : 5px 5px 5px grey;
}
#rouge{ animation : tour_ok 10s 0s infinite linear; background : red; }
#verte{ animation : tour_bug 10s 1s infinite linear; background : green; }
Le conteneur SECTION doit être positionné (en relatif ou absolu) afin que les coordonnées des éléments enfants (les boules) soient calculées par rapport à l'angle haut gauche de SECTION.
Ici on applique à chaque boule un keyframes différent : tour_bug à la boule verte et tour_ok à la boule rouge.
Chaque modèle d'animation comprend 5 étapes.
Dans le modèle d'animation tour_bug les sélecteurs des différentes étapes sont : 0%,25%,50%,75%,100%.
La balle verte met donc 2,5 secondes (10 secondes * 25%) pour parcourir une horizontale (890px) OU une verticale(220px).
Donc elle se déplace vite sur l'axe X que sur l'axe Y.
Pour que la vitesse de déplacement de la balle soit constante (boule rouge) les différents sélecteurs de chaque étape doivent être
0%, 40%, 50%, 90% et 100%. C'est ce qui est prévu dans le modèle tour_ok.
La balle parcourt alors 890 pixels en 4 secondes (10 s * 40%) et 220px en 1 seconde (10 s * 10%).
Donc la vitesse de déplacement de la balle rouge est quasi constante : environ 220px à la seconde.
J'avais dit dans un premier temps (pour ne pas complexifier) que le raccourci animation comprenait cinq paramètres (nom_modèle, durée, délai de déclenchement, itération, rythme de progression). En fait elle peut comprendre jusqu'à huit paramètres.
Plutôt que d'utiliser le raccourci animation on peut utiliser à la place jusqu'à 8 propriétés préfixées animation-.
Examinons plus en détail toutes ces propriétés !
Cette propriété définit une liste d'animations qui doivent être appliquées à l'élément ciblé.
Exemple : #boite{animation-name : grossir, deplacer ; }
Dans l'exemple deux animations vont s'appliquer successivement à l'élément "boite".
Cette propriété définit la durée d'une animation pour parcourir un cycle.
La durée du cycle peut être exprimée en secondes (s) ou en millisecondes (ms).
#rond {background : red ; width : 50px ; height : 50px ; border-radius : 25px; margin : 60px auto ;}
@keyframes grandir-foncer
{
0% {transform:scale(1) ; opacity : 0.1; }
25% {transform:scale(1.5) ; opacity : 0.3; }
50% {transform:scale(2) ; opacity : 0.7; }
100% {transform:scale(2.5) ; opacity : 1; }
}
#rond {animation : grandir-foncer 6s 0s steps(2,start) infinite alternate; }
L'animation est saccadée car la valeur du paramètre "animation-timing-function" est "steps()".
Cette propriété définit le délai d'attente avant de démarrer une animation.
La valeur par défaut est 0s.
La valeur est exprimée en secondes ou millisecondes et peut être négative !
Cette propriété indique le nombre de cycles d'une animation.
La valeur par défaut est 1.
La valeur peut être "infinite" ou un nombre même décimal.
Par exemple : 2.5 pour que le troisième cycle ne soit effectué qu'à moitié.
Cette propriété indique dans quel ordre les étapes de chaque cycle doivent être exécutées.
La valeur par défaut est normal. Avec la valeur "alternate" l'animation change de sens à chaque cycle.
Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.
On crée donc un effet "aller-retour".
Les carrés ci-dessous sont de plus en plus grands puis de plus en petits et le cycle reprend à l'infini.
Le CSS :
div {margin : 50px; display : inline-block;}
@keyframes agrandir
{
0% {transform: scale(1); }
50% {transform :scale(2); }
100% {transform :scale(3); }
}
div#carre1 {width : 50px ; height :50px ; background : coral;
animation : agrandir 5s 0s infinite linear alternate ;}
div#carre2 {width : 50px ; height :50px ; background : purple;
animation : agrandir 5s 0s infinite linear alternate ;}
Dans le keyframes agrandir je ne programme que l'agrandissement.
Et pourtant lorsque j'anime les carrés avec ce modèle il y a successivement agrandissement et réduction car j'ai
rajouté le paramètre alternate.
Le code HTML :
Cette propriété indique s'il faut "geler" l'état de l'élément à la fin de l'animation.
L'animation ne dure que 15 secondes ; le rond garde sa taille à la fin de l'animation.
Pour la relancer, actualisez la page.
Le CSS :
#rond {background : red ; width : 50px ; height : 50px ; border-radius : 25px; margin : 60px auto ;}
@keyframes grossir
{
from {transform :scale(1); }
to {transform : scale(3); }
}
#rond {animation : grossir 5s 0s linear 3 alternate forwards; }
Observez bien les arguments de la méga propriéte animation pour l'objet "rond" :
animation : grossir 5s 0s 3 linear alternate forwards; : l'animation n'est répétée que trois fois avec alternance.
La boule garde sa taille à la fin de l'animation grâce au paramètre forwards.
On dit que l'on "gèle" l'animation.
La fonction "animation-fill-mode" à "forwards" n'a aucune utilité dans le cadre d'une animation qui se répète à l'infini.
Le code HTML :
La propriété animation-play-state détermine si une animation est en cours d'exécution OU si elle est en pause.
La valeur par défaut est running : animation en cours ; l'autre valeur est paused
Grâce à cette propriété on peut redémarrer/suspendre l'animation à partir d'un évènement.
L'image est de plus en plus grande et de plus en plus violette.
Le CSS :
@keyframes filtrer
{
0%,100% {filter : hue-rotate(0deg); width : 20% ;}
25% {filter : hue-rotate(90deg);width : 30% ;}
50% {filter : hue-rotate(180deg);width : 40% ;}
75% {filter : hue-rotate(270deg);width : 50% ;}
}
img {width : 20% ; animation : filtrer 10s 0s linear infinite alternate forwards running ;}
Le code HTML :
Deux boutons de commande !
Chaque bouton associé à une fonction Javascript-jQuery.
Le script jQuery :
function stop()
{ $("img").css("animationPlayState","paused"); }
function go()
{ $("img").css("animationPlayState","running"); }
Attention dans le cadre d'un script, il faut écrire les propriétés CSS avec la syntaxe JS ("camelCase").
Pour un élément HTML, transform-origin fait référence à l'élément lui-même.
La valeur par défaut de cette propriété est "center center" : centre de l'élément lui-même.
Le carré grandit et diminue non plus à partir de son centre mais à partir de son coin supérieur gauche.
#carre {background : red ; width : 100px ; height : 100px ; margin : 60px auto ;}
@keyframes grandir-foncer
{
0% {transform:scale(1) ; opacity : 0.1; }
25% {transform:scale(1.5) ; opacity : 0.3; }
50% {transform:scale(2) ; opacity : 0.7; }
100% {transform:scale(2.5) ; opacity : 1; }
}
#carre {animation : grandir-foncer 6s 0s linear infinite alternate; transform-origin :0 0; }
Notez l'apparition de la propriété transform-origin : 0 0.
Vous pouvez animer via CSS3 non seulement les éléments HTML mais aussi les élements SVG.
Animer des éléments SVG via CSS3
Cependant il y a une notable différence concernant l'origine d'une transformation (rotation, scale, translate).
Pour un élément HTML, transform-origin fait référence à l'élément lui-même alors qu'en SVG ce
paramètre fait référence à la zone de dessin SVG (le "canevas").
Pour un élément HTML, la valeur par défaut de cette propriété est "center center" : centre de l'élément lui-même.
Tandis que pour un élément SVG, la valeur par défaut est "0 0" : le supérieur gauche du canevas.
Un petit schéma vaut mieux qu'un long discours :
