Introduction

CSS3, c'est le développement du troisième niveau des feuilles de styles.

Par rapport aux propriétés CSS existantes et bien connues des bidouilleurs de code (color, font, width, height, etc), des nouveautés sont introduites et permettent de dynamiser son design.

Parmi les nombreuses possibilités, on peut maintenant animer les éléments de son design sans script ou flash.

Transition

Il est depuis longtemps possible de changer la couleur d'un lien au survol.

Exemple pour le lien dans un bloc avec pour classe .test :

.test a:hover{color:red;}

Lien qui change de couleur au survol

Mais le changement de couleur est immédiat. Avec la propriété transition, on va créer une changement de couleur "en douceur" (2 secondes).

<p class = 'test'><a href = '#'>Lien qui change de couleur au survol</a></p>
<style>
.test a{font-size:200%;transition:color 2s linear;}
.test a:hover{color:red;}
</style>

Ce qui donne au survol :

Lien qui change de couleur au survol

Animation

Si on veut maintenant que le lien change de couleur sans le survoler, il faut créer une petite animation. Ci-dessous un changement de couleur du vert au rouge en 5 secondes :

<p class = 'test2'><a href = '#'>Lien qui change de couleur</a></p>
<style>
.test2 a{font-size:300%; animation-name: anim1; /*nom de l'animation */ animation-duration: 5s; /*durée de l'animation */ animation-iteration-count: infinite; /*répétition */} /*animation*/ 
@keyframes anim1 { 0% {color:green /*état initial*/;} 100% {color:red /*état final*/;} } 
</style> 

Ce qui donne :

Lien qui change de couleur

On peut imaginer beaucoup de choses comme des déplacements de droite à gauche, de haut en bas, des changements de taille, etc. Ci-dessous un déplacement vers la gauche avec margin-left qui passe de 0 à 8% en 4 secondes :

  
<p class = 'test3'>Texte qui se déplace</p> 
<style> /*style texte à déplacer*/ 
.test3{ font-size:300%; animation-name: anim2; animation-duration: 2s; animation-iteration-count:infinite; animation-fill-mode: forwards; /*pas de retour à l'origine*/} /*animation*/ @keyframes anim2 { 0% {margin-left:0;} 100% {margin-left:8%;} } 
</style> 

Ce qui donne :

Texte qui se déplace

Plus d'explications :

Compatibilité entre navigateurs

Il est possible que les animations ci-dessous ne marchent pas. Vous utilisez certainement une ancienne version d'un navigateur, probablement internet explorer qui intègre les nouvelle propriétés à partir de la version 10.

Les différents navigateurs n'ont pas intégré en même temps le CSS3. Du coup, un site ou un blog peut avoir un design "amoindri" pour une partie des visiteurs s'il y a trop de CSS3.

Un autre problème tient au fait que les propriétés CSS3 doivent être utilisées avec un préfixe différent pour chaque navigateur. Il faut répéter la même propriété 5 fois, ce que je n'ai pas fait ci-dessus car j'utilise un script existe qui insère automatiquement les préfixes.

Le script s'ajoute après la feuille de style :

<script type="text/javascript" src="http://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>

(Sur overblog ancienne version ou eklablog, le script peut être inséré en mode HTML dans un module libre)

Ensuite, on n'a plus besoin de mettre les préfixes :

Avant :

 .test a{ -webkit-transition:color 2s ease-in; -moz-transition:color 2s ease-in; -o-transition:color 2s ease-in; transition:color 2s ease-in; } 

Après :

.test a{ transition:color 2s ease-in; }

Reste maintenant à explorer toutes les possibilités d'animation.

Note pour Eklablog :

L'éditeur du CSS ne semble pas accepter la partie @keyframes des animations. On les intègre alors dans un module libre en mode HTML avec des balises style

Exemple pour déplacer le titre des modules :

<style> 
.module_titre_contenu, .module_titre_contenu a{ -webkit-animation-name:anim3; -moz-animation-name:anim3; -ms-animation-name:anim3; -o-animation-name:anim3; animation-name:anim3; -webkit-animation-duration:5s; -moz-animation-duration:5s; -ms-animation-duration:5s; -o-animation-duration:5s; animation-duration:5s; -webkit-animation-iteration-count:1; -moz-animation-iteration-count:1; -ms-animation-iteration-count:1; -o-animation-iteration-count:1; animation-iteration-count:1; } @-moz-keyframes anim3{ 0% {color:gray;margin-left:0;} 100% {color:black;margin-left:5%;} } @keyframes anim3{ 0% {color:gray;margin-left:0;} 100% {color:black;margin-left:5%;} } @-o-keyframes anim3{ 0% {color:gray;margin-left:0;} 100% {color:black;margin-left:5%;} } @-webkit-keyframes anim3{ 0% {color:gray;margin-left:0;} 100% {color:black;margin-left:5%;} } 
</style> 

Quelques liens pour se lancer