Auteur Udemy: Axel Paris
- Propriété
transition
(via sélecteurs) - Propriété
animation
+Keyframes
- background-color
- width / height
- margin
- padding
- font-size
- ...
exemple : Position vs Transform
Transitions gourmancdes :
- width
- padding
- position
- ...
- color
Vos transitions performantes avec...
- opacity
- translate
- rotate
- scale
.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;
}
.element {
transition-timing-function: cubic-bezier(x1, x2, x3, x4);
}
Démo : cubic-bezier.com
.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
Exercice 1 : Enoncé -> Corrigé
Exercice 2 : Enoncé -> Corrigé
Exercice 3 : Enoncé -> Corrigé
Exercice 4 : Enoncé -> Corrigé
@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;
}
}
.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>;
}