Guide complet des animations en CSS
Auteur Udemy: Axel Paris
Mouvement CSS
- Propriété
transition(via sélecteurs) - Propriété
animation+Keyframes
Eléments animables
- background-color
- width / height
- margin
- padding
- font-size
- ...
Performances
exemple : Position vs Transform
Transitions gourmancdes :
- width
- padding
- position
- ...
- color
Vos transitions performantes avec...
- opacity
- translate
- rotate
- scale
Propriété transition
.element {
transition: <property> <duration> <timing-function> <delay>;
}ou
.element {
transition-property: <property>;
transition-duration: <duration>;
transition-timing-function: <timing-function>;
transition-delay: <delay>;
}exemple:
.box {
transition: opacity 200ms ease-in 1s;
}Timing function
Cubic bezier
.element {
transition-timing-function: cubic-bezier(x1, x2, x3, x4);
}Démo : cubic-bezier.com
Déclancher une transition CSS
.element:hover
.element:active
.element:focus
...
.element.classname
.element#idname
...#button {
opacity: 0.5;
transition-duration 1s;
}
#button.active {
opacity: 1;
}var element = document.getElementById("button");
element.cla & ssList.toggleClass("active");Mauvaise pratique :
.element {
background-color: red;
}
.element:hover {
background-color: blue;
transition-duration: 1s;
}Bonne pratique :
.element {
background-color: red;
transition-duration: 1s;
}
.element:hover {
background-color: blue;
}Mettre les transitions dans l'état initial
Exercices
Exercice 1 : Enoncé -> Corrigé
Exercice 2 : Enoncé -> Corrigé
Exercice 3 : Enoncé -> Corrigé
Exercice 4 : Enoncé -> Corrigé
Les @Keyframes
@keyframes <animation name> {
<keyframe-selector > {
property: value;
}
}exemple
@keyframes ballRebond {
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 0px;
}
}ou
@keyframes ballRebond {
0%,
100% {
top: 0px;
}
50% {
top: 100px;
}
}ou encore
@keyframes ballRebond {
from,
to {
top: 0px;
}
50% {
top: 100px;
}
}Animer les keyframes
.elementToAnimate {
animation-name: <animation-name>; // obligatoire
animation-duration: <animation-duration>; //obligatoire
animation-timing-function: <animation-timing-function>;
animation-delay: <animation-delay>;
animation-iteration-count: <animation-iteration-count>;
animation-direction: <animation-direction>;
animation-fill-mode: <animation-fill-mode>;
animation-play-state: <animation-play-state>;
}