Transitions et Animations
CSS3
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
Transitions
rendre fluide le changement de valeur
d'une propriété css
Animations
semblable aux transitions mai...
Propriétés de transition
transition-property : Définit les propriétés CSS qui subiront une transition (ex: color)
transiti...
Transition : notation courte
selecteur {
transition: <transition-property> <transition-duration>
<transition-timing-functi...
Transition : fonctions par défaut
ease: décélère légèrement au début et termine sa transition
lentement. (cubic-bezier(0.2...
Propriétés principales le l'animation
animation-name : Nom de l'animation (Obligatoire)
animation-duration : Définit la du...
Animation : notation courte
selecteur {
animation: <name> <duration> <timing-function> <delay> <iteration-count><direction...
Jouons !
Meetup animations et transitions css3
Prochain SlideShare
Chargement dans…5
×

Meetup animations et transitions css3

415 vues

Publié le

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

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
415
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Meetup animations et transitions css3

  1. 1. Transitions et Animations CSS3 Formation par Ludovic Verrecchia, intervenant à 3wAcademy
  2. 2. Notre école Plus de 400 étudiants 11 salles dans le monde Plus de 2 ans d'existence
  3. 3. Nos cours
  4. 4. Notre méthode
  5. 5. Suivez-nous www.3wa.fr www.facebook.com/3WAcademy #3WAcademy 3w Academy
  6. 6. Exemple
  7. 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. 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. 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. 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. 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. 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. 13. Jouons !

×