meetup animations et transitions css3
TRANSCRIPT
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>;}