Réaliser par Ibrahima GNING

1. HTML & CSS
COURS
M. GNING, Ingénieur en informatique
Animation - Transition

2. Transition CSS
Les transitions CSS permettent de contrôler la vitesse d’animation lors de la
modification des propriétés CSS. Au lieu que les modifications de propriété
prennent effet immédiatement, vous pouvez faire en sorte que les
modifications apportées à une propriété s’effectuent sur une période donnée.
Par exemple, si vous changez la couleur d’un élément du blanc au noir, le
changement est généralement instantané. Lorsque les transitions CSS sont
activées, les modifications se produisent à des intervalles de temps qui
suivent une courbe d’accélération, qui peuvent tous être personnalisés.
Les animations qui impliquent une transition entre deux états sont souvent
appelées transitions implicites car les états entre les états de début et final
sont implicitement définis par le navigateur.
M. GNING, Ingénieur en informatique
2
Définition

3. Transition CSS
M. GNING, Ingénieur en informatique
3
Les propriétés CSS pour la transition
Propriété CSS Description
transition Est un raccourci de transition-property, transition-duration,
transition-timing-function, transition-delay
transition-delay spécifie la durée à attendre avant de démarrer l’effet de
transition d’une propriété lorsque sa valeur change.
transition-duration définit la durée d’exécution d’une animation de transition. Par défaut, la
valeur est 0s, ce qui signifie qu’aucune animation ne se produira.
transition-timing-function définit la façon dont les valeurs intermédiaires sont calculées pour les
propriétés CSS affectées par un effet de transition.
transition-property définit les propriétés CSS auxquelles un effet de transition doit être
appliqué.

4. Transition CSS
M. GNING, Ingénieur en informatique
4
Propriété transition-property
/* Keyword values */
transition-property: none;
transition-property: all;
/* Multiple values */
transition-property: all, height, color;
/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;
<a class="target">Hover over me</a>
.target {
font-size: 14px;
transition-property: font-size;
/*transition-duration: 4s;*/
}
.target:hover{
font-size: 36px;
}

5. Transition CSS
M. GNING, Ingénieur en informatique
5
Propriété transition-duration
/* <time> values */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;
/* Global values */
transition-duration: inherit;
transition-duration: initial;
transition-duration: revert;
transition-duration: revert-layer;
transition-duration: unset;
<a class="target">Hover over me</a>
.target {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
}
.target:hover{
font-size: 36px;
}

6. Transition CSS
M. GNING, Ingénieur en informatique
6
Propriété transition-delay
/* <time> values */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: revert-layer;
transition-delay: unset;
<a class="target">Hover over me</a>
.target {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 0.5s;
}
.target:hover{
font-size: 36px;
}

7. Transition CSS
M. GNING, Ingénieur en informatique
7
Propriété transition-timing-function
/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;
/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
/* Steps Function keywords */
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);
/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
<a class="target">Hover over me</a>
.target {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 0.5s;
transition-timing-function: ease;
}
.target:hover{
font-size: 36px;
}

8. Transition CSS
M. GNING, Ingénieur en informatique
8
Propriété transition
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
<a class="target">Hover over me</a>
.target {
font-size: 14px;
transition: font-size 4s 0.3s ease;
}
.target:hover{
font-size: 36px;
}

9. Animation CSS
Le module CSS animations vous permet d’animer les valeurs des propriétés
CSS, telles que la position d’arrière-plan et la transformation, au fil du temps à
l’aide d’images clés (en anglais keyframes). Chaque image clé décrit
comment l’élément animé doit s’afficher à un moment donné de la séquence
d’animation. Vous pouvez utiliser les propriétés du module animations pour
contrôler la durée, le nombre de répétitions, le démarrage différé et
d’autres aspects d’une animation.
M. GNING, Ingénieur en informatique
9
Définition

10. Animation CSS
M. GNING, Ingénieur en informatique
10
Les propriétés CSS pour l’animation
Propriété CSS Description
animation Est un raccourci de animation-name, animation-duration, animation-
timing-function, animation-delay, animation-fill-mode, animation-
direction, animation-play-state, animation-duration
animation-delay spécifie le temps d’attente entre l’application de l’animation à un élément
avant de commencer à exécuter l’animation
animation-duration définit la durée nécessaire à une animation pour terminer un cycle.
animation-iteration-count définit le nombre de fois qu’une animation doit s’exécuter.
animation-direction définit si une animation doit être lue en avant, en arrière ou en alternant
entre la lecture de la séquence vers l’avant et vers l’arrière.
animation-name spécifie les noms d’une ou plusieurs règles @keyframes qui décrivent
l’animation à appliquer à un élément
animation-play-state définit si une animation est en cours d’exécution ou en pause
animation-fill-mode définit la façon dont une animation CSS applique des styles à sa cible
avant et après son exécution.
animation-timing-function définit la progression d’une animation pendant la durée de chaque cycle.

11. Animation CSS
La règle CSS de @keyframes contrôle les étapes intermédiaires d’une
séquence d’animation CSS en définissant des styles pour les images clés (ou
waypoints) le long de la séquence d’animation. Cela donne plus de contrôle
sur les étapes intermédiaires de la séquence d’animation que sur
les transitions.
M. GNING, Ingénieur en informatique
11
Image clé ou @keyframe
@keyframes nomAnimation{
from{
// régle CSS appliqué au début
}
to{
// régle CSS appliqué à la fin
}
}
@keyframes nomAnimation{
0%{
// régle CSS appliqué au début
}
40%{
// régle CSS appliqué à 40% de l’anim
}
100%{
// régle CSS appliqué à la fin
}
}
@keyframes slide{
from{
transform : translate(0%)
}
to{
transform : translate(100%)
}
}

12. Animation CSS
La règle CSS de @keyframes contrôle les étapes intermédiaires d’une
séquence d’animation CSS en définissant des styles pour les images clés (ou
waypoints) le long de la séquence d’animation. Cela donne plus de contrôle
sur les étapes intermédiaires de la séquence d’animation que sur
les transitions.
M. GNING, Ingénieur en informatique
12
Image clé ou @keyframe
@keyframes nomAnimation{
from{
// régle CSS appliqué au début
}
to{
// régle CSS appliqué à la fin
}
}
@keyframes nomAnimation{
0%{
// régle CSS appliqué au début
}
40%{
// régle CSS appliqué à 40% de l’anim
}
100%{
// régle CSS appliqué à la fin
}
}
@keyframes slide{
from{
transform : translate(0%)
}
to{
transform : translate(100%)
}
}

13. Animation CSS
M. GNING, Ingénieur en informatique
13
Propriété CSS : animation-direction
/* Apply to 1 property */
/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: revert-layer;
animation-direction: unset;
normal
L’animation est lue en avant à chaque cycle
reverse
L’animation est lue à l’envers de chaque cycle
alternate
L’animation est inverse la direction à chaque cycle.
alternate-reverse
Inverse le sens de l’alternate

14. Animation CSS
M. GNING, Ingénieur en informatique
14
Propriété CSS : animation-iteration-count
/* Keyword value */
animation-iteration-count: infinite;
/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;
/* Multiple values */
animation-iteration-count: 2, 0, infinite;
/* Global values */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;

15. Animation CSS
M. GNING, Ingénieur en informatique
15
Propriété CSS : animation-play-state
/* Single animation */
animation-play-state: running;
animation-play-state: paused;
/* Multiple animations */
animation-play-state: paused, running, running;
/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;
running
L’animation est en cours de lecture.
paused
L’animation est actuellement en pause.

16. Animation CSS
Ces propriétés sont identiques respectivement aux propriétés suivantes :
transition-delay
transition-duration
transition-timing-function
M. GNING, Ingénieur en informatique
16
Propriété CSS : animation-delay, animation-duration, animation-timing-function

17. Animation CSS
M. GNING, Ingénieur en informatique
17
Exemple
/* Single animation */
.slider{
animation-name: slide;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
}
@keyframes slide{
0%{transform: translate(0%) }
20%{transform: translate(100%) }
40%{transform: translate(200%) }
60%{transform: translate(300%) }
80%{transform: translate(400%) }
100%{transform: translate(500%) }
}
/* Single animation */
.slider{
animation: slide 4s infinite alternate alternate backwards;
}
@keyframes slide{
0%{transform: translate(0%) }
20%{transform: translate(100%) }
40%{transform: translate(200%) }
60%{transform: translate(300%) }
80%{transform: translate(400%) }
100%{transform: translate(500%) }
}