Animation CSS3 - Création d'un fan-out avec effet de rebond à l'aide de la courbe de Bezier

Saviez-vous que transformations géométriques ajouté aux éléments HTML avec le transformerLes propriétés CSS telles que scale, skew et rotation peuvent être animées? Ils peuvent être animés en utilisant le transition propriété et @ keyframes animations, mais ce qui est encore plus cool est que les transformations animées peuvent être prises avec un cran avec l'ajout d'un peu effet de rebond, en utilisant le cubic-bezier () fonction de chronométrage.

En un mot, cubic-bezier () (en CSS) est un fonction de synchronisation pour les transitions. Il spécifie la vitesse de la transition et peut, entre autres, être également utilisé pour créer un effet de rebond dans les animations.

Dans ce post, nous allons d'abord créer une animation de transformation simple à laquelle nous avons plus tard ajouter un cubic-bezier () fonction de chronométrage. À la fin de ce didacticiel, vous comprendrez comment créer une animation utilisant à la fois un fan-out et un effet de rebond. Voici le résultat final (cliquez pour voir l'effet).

La démo s’inspire de cette belle photo de Dribbble prise par Christopher Jones sur un marqueur de lieu animé.

1. Créer les feuilles

La forme du marqueur de position est composée de cinq feuilles (appelons-les). Pour créer le forme ovale d'une feuille, utilisons le rayon de la frontière Propriété CSS. le rayon de la frontière d'un seul coin est composé de deux rayons, horizontal et vertical, comme indiqué ci-dessous.

le rayon de la frontière propriété a beaucoup de syntaxes différentes. Nous allons utiliser un plus compliqué pour la forme du marqueur:

 border-radius: htl htr hbr hbl / vtl vtr vbr vbl; 

Dans cette syntaxe, les rayons horizontaux et verticaux sont regroupés; h Et v représentent les rayons horizontaux et verticaux, et t, l, b Et r représentent les coins haut, gauche, bas et droit. Par exemple, vbl représente le rayon vertical du coin inférieur gauche.

Si vous donnez une seule valeur pour le côté horizontal ou vertical, cette valeur sera copiée par le navigateur sur tous les autres rayons horizontaux ou verticaux.

À créer une forme ovale verticale, garder les rayons horizontaux à 50% pour tous les coins, et ajuster les verticales, jusqu'à ce que la forme désirée soit vue. le côté horizontal utilisera une seule valeur: 50%.

le rayons verticaux des coins en haut à gauche et en haut à droite seront 30%, tandis que les coins en bas à gauche et en bas à droite utiliseront le 70% valeur.

HTML

CSS

.pinStarLeaf width: 60px; hauteur: 120px; rayon de bordure: 50% / 30% 30% 70% 70%; couleur de fond: # B8F0F5; 

2. Multiplier les feuilles

Comme le marqueur se déploie en montrant cinq feuilles, nous créons quatre autres exemplaires de la feuille en différentes couleurs, et avec un positionnement absolu afin de les empiler les uns sur les autres.

HTML

CSS

#pinStarWrapper width: 300px; hauteur: 300px; position: relative;  .pinStarLeaf width: 60px; hauteur: 120px; position: absolue; rayon de bordure: 50% / 30% 30% 70% 70%; gauche: 0; à droite: 0; en haut: 0; en bas: 0; marge: auto; opacité: 0,5;  .pinStarLeaf: nième de type (1) background-color: # B8F0F5;  .pinStarLeaf: nth de type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth de type (3) background-color: # 94F3B0;  .pinStarLeaf: type de type (4) background-color: # D2F8A1;  .pinStarLeaf: nth de type (5) background-color: # F3EDA2;  

3. Capturer l'événement de clic et améliorer l'esthétique

Let's ajouter une case à cocher avec le #pinStarCenterChkBox Identifiant pour capturer l'événement click. Lorsque la case à cocher est cochée, les feuilles s'évanouiront (pivoteront). Nous devons également ajouter un cercle blanc avec le #pinStarCenter identifiant pour l'esthétique. Il sera placé en haut du marqueur et constituera la pièce centrale du marqueur de position..

HTML

Nous plaçons la case à cocher avant et le cercle blanc après les feuilles:

CSS

Tout d'abord, nous définissons les styles de base pour la case à cocher et le cercle de couverture:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; hauteur: 50px; position: absolue; gauche: 0; à droite: 0; en haut: -60px; en bas: 0; marge: auto; couleur d'arrière-plan: #fff; rayon de bordure: 50%; curseur: pointeur;  #pinStarCenter, .pinStarLeaf événements de pointeur: aucun;  #pinStarCenter> input [type = "case à cocher"] width: 100%; hauteur: 100%; curseur: pointeur;  

Comme chaque feuille va tourner le long de l'axe z sous des angles différents, nous devons définir le transformer: rotatez (); propriété en conséquence, à créer une forme d'étoile. Nous appliquons également le transition propriété pour l'effet de rotation (plus précisément nous utilisons le transition: transformer 1s linéaire règle pour les feuilles).

 #pinStarCenterChkBox: vérifié ~ .pinStarLeaf transition: transformer 1s linear;  #pinStarCenterChkBox: coché ~ .pinStarLeaf: nième de type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: vérifié ~ .pinStarLeaf: nième de type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: coché ~ .pinStarLeaf: nième de type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: vérifié ~ .pinStarLeaf: nième de type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: vérifié ~ .pinStarLeaf: nième de type (1) transform: rotatez (325deg);  

Si vous regardez le CSS ci-dessus, vous pouvez voir la présence de la #pinStarCenterChkBox: vérifié ~ sélecteur général de frères et sœurs que nous ajoutons seulement la transition et transformer Propriétés quand la case à cocher est cochée (lorsque l'utilisateur clique sur le marqueur).

4. Modification du centre de la rotation

Par défaut, le centre de la rotation est positionné au centre de l'élément pivoté, dans notre cas, au centre des feuilles. Nous devons déplacer le centre de la transformation vers l'extrémité interne des feuilles. Nous pouvons le faire en utilisant le transformer-origine Propriété CSS qui change la position des éléments transformés.

Pour que l’effet de rotation fonctionne correctement, ajoutons les deux règles suivantes à la .pinStarLeaf sélecteur dans notre fichier CSS:

 .pinStarLeaf origine de transformation: 30px 30px; transition: transformée 1s linéaire;  

Voyons notre animation en fan-out en action - à ce stade, sans l'effet de rebond pour le moment. Cliquez sur le cercle blanc, au-dessus du marqueur.

Comprendre comment ubic-Bezier () fonctionne

Maintenant, pour ajouter l’effet de rebond, nous devons remplacer le linéaire fonction de synchronisation avec cubic-bezier () dans le transition déclarations dans notre fichier CSS.

Mais d'abord, comprenons le la logique derrière cubic-bezier () fonction de chronométrage afin que vous puissiez facilement donner un sens à l'effet de rebond.

La syntaxe de la cubic-bezier () la fonction est la suivante, ré et t sont distance et temps, et leurs valeurs sont généralement comprises entre 0 et 1:

cube de Bézier (t1, d1, t2, d2)

Même si expliquer CSS cubic-bezier () en termes de distance et de temps, ce n'est pas précis, c'est beaucoup plus facile à comprendre de cette façon.

Supposons qu'il y a une boite qui passe du point A au point B en 6 secondes. Utilisons le suivant cubic-bezier () fonction de synchronisation pour la transition avec le t1 = 0 et d1 = 1 valeurs.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cube-Bézier (0,1,0,0) 

En très peu de temps, la boîte passe de A à mi-chemin et prend le reste du temps pour atteindre B.

Essayons la même transition avec des valeurs t1 = 1 et d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cube-Bézier (1,0,0,0) 

Pendant les trois premières secondes, la case ne bouge pas beaucoup et plus tard, elle saute presque à mi-distance et commence à avancer progressivement vers B.

Comme vous pouvez le voir, d1 contrôle le distance entre A Et le milieu, et t1 la le temps qu'il faut pour atteindre le point médian de A.

Utilisons d2 et t2 à présent. Tous les deux t1 et d1 sera 1, et t2 = 1 et d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cube-Bézier (1,1,0,1) 

La boîte se déplace presque à mi-chemin en 3 secondes (en raison de t1 = 1, d1 = 1), et en un rien de temps il saute au point B.

Le dernier exemple remplace les valeurs précédentes de t2 et d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cube-Bézier (1,1,1,0) 

La boîte se déplace presque à mi-chemin en 3 secondes (en raison de t1 = 1, d1 = 1), puis pendant 3 secondes supplémentaires ne bouge pas beaucoup avant de sauter au point B.

Ces exemples montrent que d2 et t2 contrôler la distance et le temps qu'il faut à la boîte aller du milieu au point B.

Bien que vous n’ayez probablement pas eu besoin de cette explication longue (mais rare) de cubic-bezier () à ce stade, je pense que cela vous aidera à mieux comprendre cette fonction. Maintenant, d'où vient le rebond dans tout cela?

5. Ajouter l’effet de rebond avec Cubic-Bezier ()

le paramètres clés pour l'effet de rebond sont les distances, d1 et d2. UNE d1 valeur de Moins que 1 prend la boîte derrière le point A avant de procéder vers B au début de l'animation.

UNE d2 valeur de plus de 1 prend la boîte au-delà du point B avant de revenir se reposer en B à la fin de l'animation. D'où l'effet de rebond en avant et en arrière.

Je vais maintenant ajouter le cubic-bezier () valeurs directement à notre démo à la place de l'ancien linéaire valeur de la transition propriété, et laissez-vous voir les résultats.

 #pinStarCenterChkBox: coché  

Voici le résultat final, une animation en éventail uniquement CSS avec un effet de rebond:

Pour comparer et mieux comprendre l’effet de rebond, voici comment le cubic-bezier () La valeur de l'animation se comporte lorsqu'elle est appliquée à notre exemple: