Explication des transitions et animations css3. Notations et exemples d'utilisations.

1. Transitions et Animations
CSS3
Formation par Ludovic Verrecchia, intervenant à 3wAcademy

2. Notre école
Plus de 400 étudiants
11 salles dans le monde
Plus de 2 ans d'existence

3. Nos cours

4. Notre méthode

5. Suivez-nous
www.3wa.fr
www.facebook.com/3WAcademy
#3WAcademy
3w Academy

6. Exemple

7. Explication
Transitions
rendre fluide le changement de valeur
d'une propriété css
Animations
semblable aux transitions mais permet
un contrôle très précis dans le temps

8. Propriétés de transition
transition-property : Définit les propriétés CSS qui subiront une transition (ex: color)
transition-duration : Définit la durée en temps de la transition en seconde (s) ou milliseconde (ms)
transition-timing-function : Définit un effet de timing à utiliser (Facultative)
transition-delay : Définit l'avance ou le retard de la transition (Facultative)
selecteur {
transition-property: all;
transition-duration: 5s;
transition-timing-function: ease-in; /* commencera lentement et finira plus rapidement */
transition-delay: 1s;
}

9. Transition : notation courte
selecteur {
transition: <transition-property> <transition-duration>
<transition-timing-function> <transition-delay>;
}
selecteur {
transition: <transition-property> <transition-duration>
<transition-timing-function> <transition-delay>,
<transition-property> <transition-duration>
<transition-timing-function> <transition-delay>;
}

10. Transition : fonctions par défaut
ease: décélère légèrement au début et termine sa transition
lentement. (cubic-bezier(0.25, 0.1, 0.25, 1.0))
linear: la transition sera stable sans décélération ni accélération
ease-in: commencera lentement
ease-out: finira lentement
ease-in-out: commencera et finira lentement

11. Propriétés principales le l'animation
animation-name : Nom de l'animation (Obligatoire)
animation-duration : Définit la durée en temps de l'animation en seconde (s) ou milliseconde (ms)
animation-iteration-count : Nombre d’exécution de l'animation. Par défaut, la valeur vaut 1
animation-timing-function : Identique aux transitions
@keyframes monanimation {
0% { color: blue; }
100% { color: yellow; }
}
selecteur:hover {
animation: monanimation 1.5s ease-in-out;
}

12. Animation : notation courte
selecteur {
animation: <name> <duration> <timing-function> <delay> <iteration-count><direction>
fill-mode>;
}
selecteur {
animation: <name> <duration> <timing-function> <delay> <iteration-count><direction>
fill-mode>,
<name> <duration> <timing-function> <delay> <iteration-count><direction>
fill-mode>;
}

13. Jouons !