Función CSS cubic-bezier()
Ejemplo
Un efecto de transición con velocidad variable de principio a fin:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Definición y uso
La función cubic-bezier() define una curva Cubic Bezier.
Una curva Cubic Bezier está definida por cuatro puntos P0, P1, P2 y P3. P0 y P3 son el inicio y el final de la curva y, en CSS, estos puntos son fijos ya que las coordenadas son proporciones. P0 es (0, 0) y representa el tiempo inicial y el estado inicial, P3 es (1, 1) y representa el tiempo final y el estado final.
La función cubic-bezier() se puede usar con la propiedad animation-timing-function y la propiedad Transition-timing-function .
Versión: | CSS3 |
---|
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la función.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
Sintaxis CSS
cubic-bezier(x1,y1,x2,y2)
Value | Description |
---|---|
x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |