les effets

transition

transition est une méta propriété CSS3 permettant d'appliquer des changements de propriétés sur la durée. Ainsi la règle ci-dessous va faire que le fond du paragraphe survolé passera du rouge au bleu en 2 secondes.

p {
  width: 80%;
  background: red;
  transition: background 2s;
}

p:hover {
  background: blue;
}

transition comporte quatre valeurs :

• transition-duration : temps de la transition en s
• transition-delay : temps d'attente avant la transition
• transition-property : la propriété visée par la transition
• transition-timing-function : courbe de vitesse de l'effet

transform

transform est une propriété CSS3 permettant d'appliquer une transformation géométrique sur un élément. Les transformations les plus usuelles :

• rotate( n deg ) où n est un nombre de degré (entre -360 et 360) : fait pivoter l'élément de n degrés dans le plan. Les versions rotateX et rotateY permettent les rotations suivant l'axe concerné.
• translate( x px, y px ) déplace l'élément de x pixels sur l'axe des X et y pixels sur l'axe des Y. Cette propriété se décline aussi en deux propriétés distinctes : translateX et translateY
• scale( x, y ) applique à l'élément un facteur x sur la dimension en X et un facteur y sur la dimension en Y. Cette propriété se décline aussi en deux propriétés distinctes : scaleX et scaleY

animation

animation permet d'enchainer plusieurs changements de propriétés. La propriété s'appuie sur une @-règle : @keyframes permet de donner un nom à un découpage du temps en plusieurs frames, chacune définissant des propriétés CSS. La propriété animation consiste alors à appliquer ce découpage sur une durée et avec diverses autres options. Ci-dessous un exemple où une div carré de 100x100 va passer du rouge au jaune en 4s :

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 4s;
}

Dans cet exemple on a utilisé les mot-clés from et to pour indiquer le début de l'animation et la fin. On peut aussi utiliser des pourcentages pour découper en autant de frames qu'on le souhaite.

jQuery

jQuery nous offre un certain nombre de fonctions prédéfinies pour des animations : hide(), show(), fadeIn(), fadeOut(), slideDown(), slideUp(), slideToggle(). Sans autre précision, les animations durent 400ms. On peut donner une durée, soit via une chaine de caractères : 'slow' pour 600ms et 'fast' pour 200. Sinon onpeut aussi donner un entier pour un nombre de ms souhaité.

Pour des animations plus personnalisées, jQuery propose la fonction animate(...) qui permet de réaliser une animation un peu à la manière de la propriété CSS animation.