DIAGRAMME DETATS- TRANSITIONS ET DACTIVITES. DIAGRAMME DETATS-TRANSITIONS.
Meetup animations et transitions css3
Transcript of Meetup animations et transitions css3
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>;}