Effet zoom via les propriétés CSS3

1 ) Point de départ

Pour bien commencer, lorsque on voudra animer un élément, il faut préciser l’etat initial et le mode de transition (les paramètres) grâce à la propriété CSS3 « transition ».

Avec cette déclaration vous prévoyez une animation sur all pour une durée d’animation de 0,7 secondes combiner avec un effet ease-out.

2 ) La structure

3 ) Le css initial

Pour infos, idéalement les propriétés préfixées (-moz, -webkit) sont à mettre, mais pour alléger codes on va pas les mettre.

4 ) L’animation CSS3 proprement dite

L’effet zoom est le plus simple à réaliser.
Sur la version proposée par la démo, j’ai commpliqué un peu la chose en offrant une ombre à mon élément.

Cette ombre portée va elle aussi subir des modifications pour rendre l’animation réaliste.

Nous utilisons simplement la propriété transform pour effectuer un zoom (scale). La valeur donnée est un multiplicateur.

L’ombre portée est modifié davantage et légèrement éclaircie.

Démonstration ( passer votre souris sur l’element )

Répondre