Luego de observar en diferentes repositorios y sitios webs al final encontramos la respuesta que te mostraremos más adelante.
Solución:
Respuesta para tu pregunta
esa propiedad es para la animación de
.
¡Significa que se animará usando la propiedad superior!
Y por efecto: rebotará como Este será el efecto de transición
Entendiendo CSS cubic-bezier
Toma cuatro parámetros:
cubic-bezier(P1x,P1y,P2x,P2y)
¿Qué hacen estos?
Bueno, estos se asignan 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 siempre están 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 decide intentar algo como
cubic-bezier(2,3,5,2), será desterrado a la aceleración lineal, la peor de todas las funciones de aceleración. Es como una familia tipográfica que vuelve a Comic Sans. -
También observe que el eje x es el tiempo que toma la animación, y el eje y es la propiedad que se cambia. Según el gráfico anterior, puede visualizarlo disminuyendo 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 transición bezier
-
Constructor de bezier cúbico
-
comprensión de la curva – Matemáticas
Me gustaría dar otra explicación de la función cubic-bezier por parte de alguien que acaba de entender cómo funciona. Tuve algunos problemas mientras revisaba los tutoriales en https://freecodecamp.org. Lo entendí después de leer la respuesta anterior de eirenaios y usar el constructor cubic-bezier.
Publicar en mi blog
- La curva de Bezier 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).
-
La curva se estirará de manera diferente según las coordenadas que proporcione para los puntos P1 y P2.
Ejemplo de 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 una cantidad de tiempo dada. En este ejemplo, la animación se vuelve 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 cubic-bezier
HTML:
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 pelota se mueve desde el borde izquierdo de la pantalla hacia el borde derecho en el transcurso de 4 segundos. Los fotogramas clave están ahí para establecer dónde debe comenzar y terminar la animación, animation-timing-function: cubic-bezier() para establecer la velocidad de la animación en diferentes puntos en el tiempo.
Reseñas y valoraciones
Más adelante puedes encontrar las críticas de otros desarrolladores, tú asimismo tienes la opción de mostrar el tuyo si lo crees conveniente.