Effet rotation 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 ) La flèche en CSS

A partir de notre span.arrow composé de trois autres span, nous pouvons créer une flèche.

4 ) L’animation

Une petite retouche de la hauteur, et l’animation proprement dite

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

Répondre