Html 5 et Css3 3STI

Transition et animation en CSS

1- Ouvrir le fichier index.html qui se trouve dans D:\3sti\nabeul , puis le relier par un fichier stylenab.css
à créer pour obtenir cette page

Corps de la page : couleur d’arrière-plan bleu ciel(aquamarine), pas de marges

Entête : centré(la largeur :80% ; marges gauche et droite : 10%), hauteur 30vh,

Arrière-plan : image nabeul.jpg avec une taille (100% , 3Ovh) Type de bordure :outset
Le titre de l’entête : marge intérieure haut 5%, couleur beige , opacité 0.6 , police courier new , ombre (1px 1px
2px black)
Le main : display flex , marges gauche et droite 10%
Navigation : couleur d’arrière-plan blanc , Type de bordure : outset ,largeur 20%
Les éléments de la liste : pas de style

Les liens de menu navigation : display block , couleur d’arrière-plan bleu, pas de soulignement, couleur blanc,style
gras , lageur 60% , marge haut 3% , marges intérieures 3%
Section : couleur d’arrière-plan blanc, Type de bordure : outset, largeur 60%, marge intérieure gauche 1%
Paragraphes : police Georgia, 'Times New Roman', Times, serif ; taille 1.1em

Aside : couleur d’arrière-plan blanc, Type de bordure : outset, largeur 20%

Image : largeur 100%
Fenêtre(iframe) : largeur 100%, hauteur 50vh

Pied : marges gauche et droite 10%, alignement centré

2- Ajouter les transitions suivantes :

21
 Html 5 et Css3 3STI
 En passant la souris sur les liens : la couleur devient rgb(248, 20, 180) , largeur 80%, hauteur 5vh ,
bordure arrondit 5px
La transition de la largeur dure 1seconde
 En passant la souris sur l’image de l’aside : la largeur devient 120%
La transition de la largeur dure 2secondes
 En passant la souris sur l’image de header : les marges gauche et droite 5% , largeur 90% , la durée
de transition 3s

3- Ajouter les animations suivantes :

Paragraphe :

p{

animation-duration: 3s;
animation-name: slidein;
}

@keyframes slidein

{ from { margin-left:
100%; width: 300%;

} to { margin-
left: 0%; width: 100%;

4- Titre h1: durée de l’animation 5 secondes , nom de l’animation : anima

Cette animation passe par 3 étapes :

• le départ (to ou 0% ) avec une marge intérieure haut 0%

• la moitié (50%) avec une marge intérieure haut 10%
• l’arrivée (from ou 100%) avec une marge intérieure haut 5%

5- Ajouter une animation pour le pied de page qui dure 20 secondes et qui se passe sur 5 étapes où à
chaque étape la couleur change.

Animations
22
Html 5 et Css3 3STI

Pour créer une animation CSS on doit :

 créer et nommer l’animation (avec @keyframes)
 attacher cette animation à un élément (avec animation-name)

1. Notre première animation :

On commence par créer une animation :
@keyframes taille {
from {width: 0px;}
to {width: 200px;}
}

On utilise la règle @keyframes et on nomme l’animation taille.

Rque : Il existe quelques règles avec le signe @ (nommées at-rules) qui permettent d’encapsuler plusieurs
règles pour le processeur CSS du navigateur, par exemple @media, @page…
Ici, on change la largeur (width) de (from) 0px à (to) 200px.

On attache ensuite cette animation à un élément :

div {
animation-name: taille;
height: 100px;
width: 200px;
background-color: blue;
animation-duration: 4s;
}

On utilise :
 animation-name : pour désigner l’animation utilisée. (obligatoire)
 animation-duration : pour définir la durée de l’animation (par défaut elle est de 0 seconde).
(obligatoire)

2. Plusieurs étapes :
L’intérêt des animations est de pouvoir gérer des étapes intermédiaires. Voici une nouvelle version de
l’animation :
@keyframes taille {
0% {width: 0px;}
50% {width: 300px;}
100% {width: 200px;}
}

On a 3 étapes :
 le départ (0%) avec une largeur de 0px
 la moitié (50%) avec une largeur de 300px
 l’arrivée (100%) avec une largeur de 200px

3. Plusieurs propriétés :
23
Html 5 et Css3 3STI
On peut aussi changer plusieurs propriétés :
@keyframes taille {
0% {width: 0px; background-color: red;}
25% {width: 50px; background-color: yellow;}
50% {width: 100px; background-color: green;}
75% {width: 150px; background-color: pink;}
/* 100% {width: 200px; background-color: blue;} devient facultatif car
l'état 100% est déjà l'état du div "final".*/
}

4. Démarrage différé :
Dans les exemples ci-dessus, l’animation commence dès le chargement, ce qui n’est pas toujours
souhaitable. On dispose de la propriété animation-delay pour différer le départ de la durée voulue.
En poursuivant notre exemple ça pourrait donner ce code :
div {
animation-name: taille;
height: 100px;
width: 200px;
background-color: blue;
animation-duration: 4s;
animation-delay: 2s;
}

5. Nombre d’exécutions :
Par défaut, une animation est exécutée une seule fois, si on en veut plus, il faut utiliser la
propriété animation-iteration-count. Toujours avec notre exemple :
div {
animation-name: taille;
height: 100px;
width: 200px;
background-color: blue;
animation-duration: 4s;
animation-iteration-count: 2;
}

Rque :
Si on veut un nombre d’exécutions infini, au lieu de mettre une valeur on utilisera infinite.

6. Sens de l’animation :
Par défaut une animation va dans le sens normal mais on peut aussi l’obliger à aller dans l’autre sens en
utilisant la propriété animation-direction. On dispose de deux valeurs :
 reverse : on va dans le sens inverse.
 alternate : on alterne d’un sens à l’autre (dans ce cas évidemment il faut prévoir au moins deux
exécutions).

24
Html 5 et Css3 3STI
div {
height: 100px;
width: 200px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

7. Progression de l’animation :
On peut modifier l’animation avec la propriété animation-timing-function et ces valeurs :
 ease : début rapide, puis ça accélère, puis ça ralentit à la fin (c’est l’effet par défaut).
 linear : même vitesse du début à la fin.
 ease-in : début lent.
 ease-out : fin lente.
 ease-in-out : début et fin lents.

8. Le style avant et après l’animation :

Le style avant et après l’animation est défini par défaut par les règles de l’élément. On a la possibilité de
changer ce comportement en utilisant la propriété animation-fill-mode. On dispose de ces valeurs :
 none : comportement par défaut (en gros ça sert à rien)
 forwards : on garde les valeurs calculées lors de la dernière étape
 backwards : on garde les valeurs calculées lors de la première étape
L’interprétation peut être délicate selon les répétitions et sens des animations.

Par exemple avec ce code :

@keyframes taille {
0% {width: 0px ;}
100% {width: 200px ;}
}
div {
height: 100px;
width: 200px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-delay: 2s;
animation-fill-mode: backwards;
}

Au départ et pendant le délai de démarrage, la largeur sera de 0px qui correspond à la première étape (à
0%) parce qu’on a utilisé la valeur backwards pour animation-fill-mode.
9. Action sur une animation :
Pour l’instant nous n’avons pas vu de possibilité d’intervention sur une animation. On dispose de la
propriété animation-play-state qui permet une interaction avec ces valeurs :
 running : valeur par défaut de l’animation en action.
 paused : animation en pause.

Voici le code d’un exemple où on met l’animation en pause en survolant l’élément :

@keyframes taille {
0% {width: 50px ;}
100% {width: 200px ;}
}
div {
25
Html 5 et Css3 3STI
height: 100px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
div:hover {
animation-play-state: paused;
}

On peut faire exactement l’inverse et mettre l’animation en action seulement au survol :

@keyframes taille {
0% {width: 50px}
100% {width: 200px}
}
div {
height: 100px;
background-color: blue;
animation-name: taille;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}

Transitions

26
Html 5 et Css3 3STI

Les transitions permettent de passer d'un affichage à un autre pour un même objet, d'un contenu à un
autre, de façon progressive.

1. Syntaxe de la propriété :
 transition-property :
Indique à quelle propriété on fournit une transition. Par défaut all, c’est-à-dire toutes les propriétés.
Par exemple pour changer la couleur progressivement :
transition-property:color;

 transition-duration :
Définit la durée totale du temps de la transition. Par défaut la valeur est 0, il n'y a aucune transition.
Exemple, pour une durée d'une demi-seconde :
transition-duration:0.5s;

 transition-timing-function :
Définit la forme de la progression dans le temps, avec des accélérations possibles durant la transition.
 Liste des valeurs possibles:
- ease: Par défaut, Cela donne un départ et une arrivée ralentis.
- linear: Une fonction linéraire,
- ease-in: Départ ralenti.
- ease-out: Arrivée ralentie.
- ease-in-out: Départ et arrivée ralentis.

 transition-delay
Indique à quel moment démarre la transition (par rapport à l'évènement qui la déclenche).
Par exemple pour un délai de réaction d'une seconde :
transition-delay: 1s;

Par défaut le délai est de 0.

2. Transition :
Les quatre propriétés peuvent être réduites à une seule.
On place dans l'ordre : transition-property, transition-duration, transition-timing-function, transition-
delay. Pas de virgules pour séparer les valeurs, comme usuel.
transition: all 2s ease 0;

On peut omettre les dernières valeurs.

27
Html 5 et Css3 3STI

3. Utiliser des listes :

On peut avoir une liste de groupes de propriétés séparées par une virgule :
transition: color 0.2s ease 1s, top 2s ease-in 0;

Les propriétés élémentaires comme la forme compacte peuvent comporter des listes séparées par une
virgule :
transition-property:color,top;
transition-duraction:1s, 5s;

Les éléments des listes sont associés par leur position dans la liste. Une durée d'une seconde est
attribuée à la propriété color, une durée de 5 secondes à la propriété top.

4. Exemple :
Page.html :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="tr2.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>3SI</div>
</body>
</html>

tr2.css :
div{
color: white;
background-color: red;
width: 300px;
height: 300px;
text-align: center;
position: relative;
top: 0;
left: 0;
transition:left,border-radius 5s,10s ;
}
div:hover{
left:1000px;
border-radius: 50%;
}

28