Effets en CSS

Les transitions

Ce sont des propriété CSS3 permettant d'appliquer des changements de propriétés sur la durée. Ainsi la règle ci-dessous change la couleur de fond du paragraphe exemple au survol et ce en 2s.

p.transitionExample       { background-color: tan;  transition: background-color 2s }
p.transitionExample:hover { background-color: thistle }
    

Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.

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

Les transformations

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

• Exemple : 

Les animations

animation permet d'enchainer plusieurs changements de propriétés. La méta 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 animationExample {  from{background-color:red;}  to{background-color:yellow;}  }

div#carre {  width:100px;  height:100px;  background-color:red;
             animation: animationExample 4s infinite alternate;
          }

Les différentes propriétés mises en oeuvre sont :

• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode

L'animation ne s'exécute qu'une seule fois. On utilise la propriété animation-iteration-count pour spécifier le nombre de répétition (infinite pour une exécution en boucle).