Faites bouger vos contenus en CSS3

EN RAISON D’UNE MODIFICATION DE MES ARTICLES, LES APERCUS SONT INDISPONIBLES. VEUILLEZ PAR AVANCE M’EN EXCUSER.

Parmi les nouveautés du CSS3, nous pouvons trouver des effets d’animation très sympathiques nous permettant de faire bouger du contenu quasiment à volonté. Les déplacements de blocs, rebondissements et vibrations sont désormais accessibles via quelques lignes de code. Jadis du Jquery était nécessaire pour effectuer de telles opérations, mais à présent, seules les vieilles versions d’Internet Explorer (9 et plus anciennes) ne profiteront pas de tels affichages.

Voici donc quelques effets très sympas à insérer sur son site, afin de mettre en exergue du contenu, ou pour rendre la visite plus attrayante :

L’effet bounce :

/*Déclaration de l'effet (réglages de position*/
@-webkit-keyframes bounce{ 
from {-webkit-transform: translateY(0px);}
to   {-webkit-transform: translateY(-5px);}
} 
    @-moz-keyframes bounce{
from {-moz-transform: translateY(0px);}
to   {-moz-transform: translateY(-5px);}
	} 
     @-ms-keyframes bounce{
from {-ms-transform: translateY(0px);}
to   {-ms-transform: translateY(-5px);}
	 } 
      @-o-keyframes bounce{ 
from {-o-transform: translateY(0px);}
to   {-o-transform: translateY(-5px);}
	  } 
@keyframes bounce{
from {transform: translateY(0px);}
to   {transform: translateY(-5px);}
}
.bouncing img:hover {
-webkit-animation: bounce 1s infinite;
        -moz-animation: bounce 1s infinite;
         -ms-animation: bounce 1s infinite;
          -o-animation: bounce 1s infinite;
             animation: bounce 1s infinite;
}

Résultat de l’effet bounce au survol de la souris

L’agrandissement de blocs

Cela va nous permettre d’agrandir un élément au survol de la souris (comme un champ de recherche par exemple, vous avez dû en voir sur certains sites)

La déclaration se fait directement sur le bloc concerné (taille, durée de transition, etc.) mais nous n’avons pas de keyframe cette fois-ci.

Déterminons donc notre bloc avec ceci :

.etirement #effet{
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Pour Safari 3.1 to 6.0 */
    transition: width 2s;
}
.etirement #effet:hover {
    width: 300px;
}

Résultat de l’effet d’étirement au survol de la souris

La rotation d’éléments

Une de mes préférées, car elle permet d’effectuer une animation normalement complexe à réaliser, mais à présent facile d’utilisation. Sur le principe d’un bloc que l’on agrandit, une rotation peut être effectuée au survol de la souris. Il s’agirait là d’un bouton à faire ressortir (comme « Ajout au panier » pour les e-commerçants, ou un lien de type button sur une page d’accueil)

Voici comment déterminer cela en CSS3 :

.rotate #effet {
    width: 100px;
    height: 100px;
    background: #1b7313;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Pour Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

.rotate #effet:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}

Encore une fois, on détermine au préalable une durée d’exécution de l’animation, puis avec hover on attribue un degré de rotation et une taille à atteindre.

Résultat de l’effet de rotation au survol de la souris

Le déplacement d’éléments

Avec ceci nous allons pouvoir bouger un élément d’une distance déterminée, que ce soit en hauteur ou en largeur. Voici donc pour déplacer de gauche vers la droite :

/* On détermine le mouvement avec nos keyframes */
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
/* Et on l'applique en déterminant la durée de l'effet et s'il est infini (ou pas !) */
.moveleft #effet {
    width: 100px;
    height: 100px;
    background: #1b7313;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

Pas trop dur, n’est-ce pas ?

Résultat de l’effet de déplacement

Il existe bien évidemment d’autres possibilités de s’amuser avec les CSS3 pour effectuer des animations, et le grand must est de pouvoir combiner tous ces éléments afin de réaliser un mouvement au travers de la page.

Par-dessus le marché, les multiples ajout touchant aux bordures, à l’ombrage des textes, à l’ajout de polices de caractères non installées sur les navigateurs, le web a désormais passé une étape du design en ligne en alliant simplicité et fonctionnalité !

On regrettera encore une fois qu’Internet Explorer jusqu’à la version 9 ne prenne pas en charge de nombreux effets…Pour vous exercer ou en savoir plus, rien de plus simple : testez-vous sur le site de la W3school !

 Imprimer