Animación CSS3 - Creando un fan-out con efecto de rebote usando la curva Bezier

¿Sabía que se pueden animar las transformaciones geométricas agregadas a elementos HTML con la propiedad CSS transform como escalar, sesgar y rotar? Se pueden animar usando la  propiedad transition y las animaciones @keyframes, pero lo que es aún más interesante es que las transformaciones animadas se pueden tomar una muesca con la adición de un pequeño efecto de rebote, utilizando la función cubic-beizier() de temporización.

En pocas palabras, cubic-beizier() (en CSS) es una función de tiempo para las transiciones. Especifica la velocidad de la transición y entre otras cosas, también se puede utilizar para  crear un efecto de rebote en las animaciones.

En este tutoriales en linea, primero vamos a  crear una animación de transformación simple a la que luego agregaremos una función de tiempo cubic-beizier(). Al final de este tutorial, comprenderá cómo crear una animación que use  tanto un efecto de abanico como de rebote. 

La demo está inspirada en esta hermosa foto de Dribbble de Christopher Jones sobre un marcador de ubicación animado.

1. Creando las hojas.

La forma del marcador de ubicación se compone de cinco hojas (llamémoslas). Para crear la forma oval de una hoja, usemos la  propiedad CSS border-radius. El border-radius de una sola esquina se compone de dos radios, horizontal y vertical, como se muestra a continuación.

La propiedad border-radius tiene muchas sintaxis diferentes. Usaremos uno más complicado para la forma del marcador:

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

En esta sintaxis, los radios horizontales y verticales se agrupan; h y v representa a los radios horizontales y verticales, y t, l, b y r, representa a la parte superior, izquierda, abajo y esquinas derecha. Por ejemplo, vbl,representa el radio vertical de la esquina inferior izquierda.

Si solo da un valor para el lado horizontal o vertical, el navegador copiará ese valor a todos los otros radios horizontales o verticales.

Para  crear una forma ovalada vertical, mantenga los radios horizontales en todas las esquinas del 50% y ajuste los verticales hasta que se vea la forma deseada. El  lado horizontal usará un único valor: 50%.

Los  radios verticales de las esquinas superior izquierda y superior derecha serán 30%, mientras que las esquinas inferior izquierda y la inferior derecha utilizarán el valo r70%.

HTML

<div class="pinStarLeaf"></div>

CSS

.pinStarLeaf {
      width: 60px;
      height: 120px;
      border-radius: 50%/30% 30% 70% 70%;
      background-color: #B8F0F5;
}

IMAGEN: La forma del marcador (óvalo vertical)

2. Multiplicando las hojas.

Como el marcador se desplegará mostrando cinco hojas, creamos cuatro copias más de la hoja en diferentes colores y con una posición absoluta para apilarlas una sobre otra.

HTML

<div id="pinStarWrapper">
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
</div>

CSS

#pinStarWrapper{
      width: 300px;
      height: 300px;
      position: relative;

    }

    .pinStarLeaf{
        width: 60px;
        height: 120px;
        position: absolute;
        border-radius: 50%/30% 30% 70% 70% ;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        opacity: .5;

    }

    .pinStarLeaf:nth-of-type(1){
      background-color: #B8F0F5;

    }

    .pinStarLeaf:nth-of-type(2){
      background-color: #9CF3DC;

    }

    .pinStarLeaf:nth-of-type(3){
      background-color: #94F3B0;

    }

    .pinStarLeaf:nth-of-type(4){
      background-color: #D2F8A1;

    }

    .pinStarLeaf:nth-of-type(5){
      background-color: #F3EDA2;

}

3. Capturando evento click y mejorando la estética

Agreguemos una casilla de verificación con el  #pinStarCenterChkBox identificador para capturar el evento de clic. Cuando se marca la casilla de verificación, las hojas se expandirán (girarán). También necesitamos agregar un círculo blanco con el  #pinStarCenter identificador de estética. Se colocará en la parte superior del marcador y será la pieza central del marcador de ubicación.

HTML

Colocamos la casilla de verificación antes y luego el círculo blanco de las hojas:

<div id="pinStarWrapper">
      <input type="checkbox" id="pinStarCenterChkBox">
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div class="pinStarLeaf"></div>
      <div id="pinStarCenter"></div>
</div>

CSS

Primero, establecemos los estilos básicos para la casilla de verificación y el círculo de cobertura:

#pinStarCenter, #pinStarCenterChkBox{
        width: 45px;
        height: 50px;
        position: absolute;
        left: 0;
        right: 0;
        top: -60px;
        bottom: 0;
        margin: auto;
        background-color: #fff;
        border-radius: 50%;
        cursor: pointer;

    }

    #pinStarCenter, .pinStarLeaf{
      pointer-events: none;

    }
    #pinStarCenter > input[type="checkbox"]{
        width: 100%;
        height: 100%;
        cursor: pointer;

    }

Como cada hoja girará a lo largo del eje z en diferentes ángulos, debemos establecer la transform: rotatez(); propiedad en consecuencia, para crear una forma de estrella. También aplicamos la propiedad de transition para el efecto de rotación (más precisamente usamos la  transition: transform 1s linear).

#pinStarCenterChkBox:checked ~ .pinStarLeaf{
        transition: transform 1s linear;

    }
    #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(5){
        transform: rotatez(35deg);

    }
    #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(4){
       transform: rotatez(105deg);

    }

    #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(3){
        transform: rotatez(180deg);

    }

    #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(2){
        transform: rotatez(255deg);

    }

    #pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(1){
        transform: rotatez(325deg);

    }

Si observa el CSS anterior, puede ver en la presencia del  #pinStarCenterChkBox:checked ~ selector general de hermanos que solo agregamos las propiedades transition y cuando se marca la casilla de verificación (cuando el usuario hizo clic en el marcador).

4. Modificar el centro de la rotación.

Por defecto, el centro de la rotación se coloca en el centro del elemento girado, en nuestro caso, en el centro de las hojas. Necesitamos mover el centro de la transformación al extremo interno de las hojas. Podemos hacer esto usando la propiedad de transform-origin que  cambia la posición de los elementos transformados.

Para que el efecto de rotación funcione correctamente, agreguemos las dos reglas siguientes al selector .pinStarLeaf en nuestro archivo CSS:

.pinStarLeaf{
        transform-origin: 30px 30px;
        transition: transform 1s linear;
}

Veamos nuestra animación de fan out en acción, en este punto, sin el efecto de rebote todavía. 

Entendiendo cómo funciona ubic-Bezier ()

Ahora, para agregar el efecto de rebote, necesitamos reemplazar la  función de tiempo linear con cubic-bezier() las declaraciones transition en nuestro archivo CSS.

Pero primero, entendamos la lógica detrás de la función cubic-bezier() de temporización para que puedas entender el efecto de rebote.

La sintaxis de la función cubic-bezier() es la siguiente,  d y t son la distancia y el tiempo y sus valores suelen oscilar entre 0 y 1:

cubic-bezier (t1, d1, t2, d2)

Aunque la explicación de CSS cubic-bezier() en términos de distancia y tiempo no es precisa, es mucho más fácil de entender de esta manera.

Supongamos que hay un cuadro que se mueve del punto A al B en 6 segundos. Usemos la siguiente función cubic-bezier() de temporización para la transición con los valores t1=0 y d1=1.

/* t1 = 0 , d1 = 1, t2 = 0, d2 = 0 */
cubic-bezier(0,1,0,0)

En casi ningún momento, la caja se mueve de A a punto medio y toma el resto del tiempo para llegar a B.

Probemos la misma transición con valores  t1=1 y d1=0.

/* t1 = 1 , d1 = 0, t2 = 0, d2 = 0 */
cubic-bezier(1,0,0,0)

Durante los primeros tres segundos, la caja no se mueve mucho, y luego casi salta al punto medio, y comienza a moverse constantemente hacia B.

Como se puede ver, d1 controla la distancia entre A y el punto medio y el tiempo t1 que tarda en llegar al punto medio de la A.

Vamos a usar d2 y t2 ahora. Ambos t1 y d1 serán 1, y  t2=1 y d2=0.

/* t1 = 1 , d1 = 1, t2 = 0, d2 = 1 */
cubic-bezier(1,1,0,1)

La caja se mueve casi a la mitad en 3 segundos (debido a t1=1, d1=1) y en ningún momento salta al punto B.

El último ejemplo intercambia los valores anteriores de t2 y d2:

/* t1 = 1 , d1 = 1, t2 = 1, d2 = 0 */
cubic-bezier(1,1,1,0)

La caja se mueve casi a la mitad en 3 segundos (debido a t1=1, d1=1), luego, durante 3 segundos más, no se mueve mucho antes de saltar al punto B.

Estos ejemplos muestran que d2 y t2 controlan la distancia y el tiempo que tarda la caja para ir desde mediados de punto a punto B .

Aunque probablemente no necesitó esta explicación larga (aunque dispersa) cubic-bezier() en este momento, creo que le ayudará a comprender mejor esta función. Ahora, ¿de dónde viene el rebote en todo esto?

5. Agregando el efecto de rebote con Cubic-Bezier ()

Los parámetros clave para el efecto de rebote son las distancias, d1 y d2. Un valor d1 inferior a 1 toma el cuadro detrás del punto A antes de avanzar hacia B al comienzo de la animación.

Un valor d2 de  más de 1 lleva el cuadro más allá del punto B antes de volver a descansar en B al final de la animación. De ahí el efecto rebote de ida y vuelta

Ahora agregaré los valores cubic-bezier() directamente a nuestra demostración en lugar del valor linear anterior de la propiedad transition, le permitirá ver los resultados.

#pinStarCenterChkBox:checked ~ .pinStarLeaf{
transition: transform 1s cubic-bezier(.8,-.5,.2,1.4);}

Aquí está el resultado final, una animación desplegable solo para CSS con un efecto de rebote:

Para comparar y comprender mejor el efecto de rebote, aquí es cómo se comporta el  valor cubic-bezier() de la animación cuando se aplica a nuestro cuadro de ejemplo: cubic-bezier...