manual de referencia CSS

CSS @reglas (RULES)

大全 de propiedades CSS

Regla @charset CSS Funciones CSS (Functions)

CSS cúbico-función bezier()

Ejemplo en línea

Efectos de transición de diferentes velocidades desde el principio hasta el final:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<título>Manual básico(w3(codebox.com)</título>
<style>　
div {
　　width:　100px;
　　altura:　100px;
　　fondo: rojo;
　　transition: ancho　2s;
　　transition-timing-function:　cubic-bezier(0.1,　0.7,　1.0,　0.1);
}
div:hover　{
　　width:300px;
}
</style>
</head>
<body>
<h1>cubic-Función bezier() </h1>
<p>Mover el ratón sobre el elemento div, para ver el efecto.</p>
<div></div>
<p><b>Nota:</b> Internet Explorer　9　y las versiones anteriores no admiten este efecto.</p>
</body>
</html>

Prueba a ver ‹/›

Definición y uso

cubic-la función bezier() define una curva bezier (Cubic Bezier).

La curva bezier se define por cuatro puntos P0, P1，P2 y P3 definición. P0 y P3 es el punto de partida y el punto de llegada de la curva. P0 es (0,0) y representa el tiempo inicial y el estado inicial, P3es (1,1）y representa el tiempo final y el estado final.

Desde el gráfico podemos saber que cubic-Rango de valores de bezier:

P0：Valor predeterminado (0,　0)
P1：Valor dinámico (x1,　y1)
P2：Valor dinámico (x2,　y2)
P3：Valor predeterminado (1,　1)

Lo que necesitamos prestar atención es P1 y P2 los valores de los dos puntos, y el rango de valores del eje X es de 0 a 1cuando el valor esté fuera del rango, cubic-bezier no funcionará; no se especifica el valor del eje Y, por supuesto, también no es necesario que sea demasiado grande.

La comprensión más directa es que se pondrá una línea recta en el rango solo 1 en el eje de coordenadas, y extraer dos puntos para tirar (el rango de valores del eje X es [0, 1], eje Y arbitrario), y la curva formada al final es la curva de velocidad del animación.

cubic-bezier() se puede usar para animation-timing-function 　y transition-timing-function Atributo.

Versión de soporte: CSS3

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite la función por primera vez.

Función
cubic-bezier()	4.0	10.0	4.0	3.1	10.5

Sintaxis de CSS

cubic-bezier(x1,y1,x2,y2)

Valor	Descripción
x1,y1,x2,y2	es obligatorio. Valor numérico, x1 y x2 Debe ser de 0 a 1 de los números.

Función de CSS

Regla @charset CSS Funciones CSS (Functions)