custom - Entendiendo la propiedad de transición cubic-bezier en CSS

easing functions

Question

Tengo un div que contiene algunas diapositivas y menú.

<div id="wrap"></div>

A continuación se muestra mi css para div .

#wrap {
    position: relative;
    top: 0;
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}

¿Puede alguien explicarme qué hace la propiedad de transición aquí? .

No puedo entender el efecto que va a producir en div.

Answer 1

Responde a tu pregunta

esa propiedad es para la animación de <div id="wrap"></div> .

¡Significa que se animará usando la propiedad superior!

Y para el efecto: rebotará de esta manera será el efecto de transición

Entendiendo CSS cubic-bezier

Lleva cuatro parámetros:

cubic-bezier(P1x,P1y,P2x,P2y)

que hacen estos

Bueno, estos mapas se dirigen a puntos, y estos puntos son parte de una curva de Bézier:

• Entonces, hay 4 puntos, pero la función solo menciona P1 y P2 con sus valores X e Y correspondientes.

• Para CSS Bézier Curves, P0 y P3 están siempre en el mismo lugar. P0 está en (0,0) y P3 está en (1,1). Una cosa importante a tener en cuenta es que los puntos que se pasan en la función cubic-bezier solo pueden estar entre 0 y 1. Entonces, si decides probar algo como cubic-bezier(2,3,5,2) , ser desterrado a la flexibilización lineal, la peor de todas las funciones de flexibilización. Eso es como una familia tipográfica que se remonta a Comic Sans.

• También tenga en cuenta que el eje x es el tiempo que tarda la animación, y el eje y es la propiedad que se está cambiando. Según el gráfico anterior, puede visualizarlo acelerándose rápidamente al principio, disminuyendo la velocidad en el medio y aumentando la velocidad al final.

Enlaces Útiles

• Fuente de respuesta de este blog

• Para crear una mejor transición.

• Constructor de bezier cúbico

• comprensión de la curva - matemáticas

Answer 2

Me gustaría proporcionar otra explicación de la función cúbica de bezier por alguien que acaba de entender cómo funciona. Tuve algunos problemas con eso mientras revisaba los tutoriales en https://freecodecamp.org . Lo entendí después de leer la respuesta anterior de share y usar el constructor cúbico-bezier.

Publicar en mi blog

1. La curva de Bézier se basa en cuatro puntos: P0, P1, P2 y P3. P0 se establece de forma predeterminada en (0, 0) y P3 se establece de forma predeterminada en (1, 1). P0 y P3 son el principio y el final de la curva y no puede cambiarlos.

2. La curva se estirará de manera diferente según las coordenadas que proporcione para los puntos P1 y P2.

   Ejemplo cubic-bezier

En el ejemplo anterior, P1 se establece en (0.1, 0.1) y P2 se establece en (1, 0). La velocidad de la animación depende de cuánto cambia el estado por cantidad de tiempo dada. En este ejemplo, la animación se hace más rápida con el tiempo. Durante la primera mitad del tiempo utilizado para la animación, cubrirá aproximadamente el 15% de la distancia (cuando Tiempo = 0.5, Estado ~ 0.15). Cubrirá el 85% restante de la distancia en la segunda mitad.

Consulte el ejemplo en jsfiddle para ver cómo funciona la animación en la práctica: animación de bola de cubic-bezier

HTML:

<div class="ball"></div>

CSS:

.ball{
  background: red;
  border-radius: 50%;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  animation-name: bounce;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

@keyframes bounce {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

En el ejemplo, la bola se mueve desde el borde izquierdo de la pantalla hasta el borde derecho en el transcurso de 4 segundos. Los fotogramas clave están allí para establecer dónde debe comenzar y terminar la animación, animación-timing-function: cubic-bezier () para configurar la velocidad de la animación en diferentes momentos.