La función cubic-bezier() es una función incorporada en CSS que se usa para definir una curva Cubic Bezier.
Una curva Bezier es una curva definida matemáticamente que se utiliza en aplicaciones gráficas bidimensionales como Adobe Illustrator, Inkscape, etc. La curva está definida por cuatro puntos: la posición inicial y la posición final, es decir, P0 y P3 respectivamente (que se denominan «anclajes»). y dos puntos medios separados, es decir, P1 y P2 (que se denominan «asas») en nuestro ejemplo. Las curvas de Bezier se utilizan con frecuencia en gráficos por computadora, animación, modelado, etc.
Sintaxis:
cubic-bezier( x1, y1, x2, y2 )
Parámetros: Esta función acepta cuatro parámetros que son obligatorios. Contiene un valor numérico y el valor de x1 y x2 se encuentra entre 0 y 1.
El siguiente programa ilustra la función cubic-bezier() en CSS:
Programa:
html
<!DOCTYPE html>
<html>
<head>
<title>cubic-bezier function</title>
<style>
.geeks {
width: 150px;
height: 80px;
background: green;
transition: width 5s;
transition-timing-function: cubic-bezier(0.3, 0.7, 1.0, 0.1);
}
div:hover {
width:300px;
}
.gfg {
font-size:40px;
font-weight:bold;
color:green;
text-align:center;
}
h1 {
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<h1>The cubic-bezier() Function</h1>
<div class = "geeks"></div>
</body>
</html>
Producción:
Navegador compatible:
- Google cromo 16
- Borde 12
- explorador de Internet 10
- firefox 4
- Ópera 12.1
- Safari 6