CSS3 et HTML5 apporte beaucoup de nouveautés. Voyons comment mettre en place un effet de zoom animé en pur CSS 3. Nous utiliserons pour ça les transitions. A noter que cette technique ne fonctionne que sur des navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+)
Dans un premier temps nous insérons notre image :
<img class="zoomEffect" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="HTML5" />
Nous avons mis une classe zoomEffect afin de ne cibler que les images ayant cette attribut.
Il faut ensuite styler notre image et l’animer via CSS :
img.zoomEffect {
-moz-transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
opacity: 0.7;
}
img.zoomEffect:hover {
-moz-transform: rotate(5deg) scale(1.10);
-webkit-transform: rotate(5deg) scale(1.10);
-o-transform: rotate(5deg) scale(1.10);
-ms-transform: rotate(5deg) scale(1.10);
transform: rotate(5deg) scale(1.10);
opacity: 1;
}
On définit sur notre image une transition (-*-transition) qui s’appliquera à toutes les propriétés en utilisant la valeur all (on peut définir une liste de propriété qui seront animées). Celle-ci durera une demi-seconde (0.5s) et utilisera l’effet ease-in-out. Le dernier paramètre est le délai avant l’animation. 0s indique qu’on lance l’animation immédiatement. J’ai utilisé ici la notation raccourcis mais on peut définir chaque propriété individuellement. Je vous laisse vous reporter à la documentation ou à cet article d’alsacreations sur les transitions.
Au survol de l’image (:hover), on définit une rotation de 5° rotate(5deg) et d’agrandissement de 10% scale(1.10). On met également l’opacité à 100% (opacity: 1) pour un meilleur effet.
Et voila le résultat :
Ceci n’est qu’un exemple simple des possibilités du module de transition de CSS3 qui permet de mettre en place des effets d’animation simple afin d’améliorer l’ergonomie de votre site. Pour avoir plus de contrôle sur les effets, il est possible d’utiliser le module d’animation de CSS3 qui permet de créer des keyframes afin de définit précisément les étapes de votre animation.
Edit (21 Avril 2015) : Il est possible de déterminer l’origine de la transformation en utilisant la propriété transform-origin.
img.zoomOriginEffect {
transition: all 0.5s ease-in-out 0s;
opacity: 0.7;
}
img.zoomOriginEffect:hover {
transform: rotate(25deg);
opacity: 1;
transform-origin: top left;
}
NB : j’ai volontairement omis les règles CSS liés aux préfixes propriétaires et supprimer le scale.
Tweet
