Transitions et AnimationsCSS3

Formation par Ludovic Verrecchia, intervenant à 3wAcademy

Notre école

Plus de 400 étudiants

11 salles dans le monde

Plus de 2 ans d'existence

Nos cours

Notre méthode

Suivez-nous

www.3wa.fr

www.facebook.com/3WAcademy

#3WAcademy

3w Academy

Exemple

Explication

Transitionsrendre fluide le changement de valeurd'une propriété css

Animationssemblable aux transitions mais permetun contrôle très précis dans le temps

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;}

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>;}

Transition : fonctions par défaut

ease: décélère légèrement au début et termine sa transitionlentement. (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

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;}

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>;}

Jouons !