Descubre nuevos flujos de trabajo en esta referencia integral de las funciones de Herramientas para desarrolladores de Chrome relacionadas con ver y cambiar CSS.
Consulta Cómo ver y cambiar el CSS para conocer los conceptos básicos.
Seleccionar un elemento
El panel Elements de Herramientas para desarrolladores te permite ver o cambiar el CSS de un elemento a la vez.
En la captura de pantalla, el elemento h1 destacado en azul en el árbol del DOM es el elemento seleccionado.
A la derecha, los diseños del elemento se muestran en la pestaña Estilos. A la izquierda, el elemento se
destacado en la ventana de visualización, pero solo porque el mouse se desplaza sobre él en la ventana DOM
Árbol.
Consulta Cómo ver el CSS de un elemento para ver un instructivo.
Hay muchas formas de seleccionar un elemento:
- En el viewport, haz clic con el botón derecho en el elemento y selecciona Inspeccionar.
- En Herramientas para desarrolladores, haz clic en Seleccionar un elemento.
o presiona Comando + Mayúsculas + C (Mac) o
Control + Mayúsculas + C (Windows y Linux) y, luego, haz clic en el elemento
el viewport. - En las Herramientas para desarrolladores, haz clic en el elemento del árbol del DOM.
- En las Herramientas para desarrolladores, ejecuta una consulta como
document.querySelector('p')en la consola, haz clic con el botón derecho en y selecciona Mostrar en el panel de elementos.
Ver CSS
Usa la opción Elementos > Las pestañas Styles y Computed para ver las reglas de CSS y diagnosticar problemas de CSS.
Cómo navegar con vínculos
La pestaña Estilos muestra vínculos en varios lugares a distintos lugares, incluidos, sin limitaciones, los siguientes:
- Junto a las reglas de CSS, se encuentran las hojas de estilo y las fuentes de CSS. Estos vínculos abren el panel Fuentes. Si se redujo la hoja de estilo, consulta Cómo hacer que un archivo reducido sea legible.
- En la sección Heredado de ..., a los elementos superiores.
- En llamadas a
var(), a declaraciones de propiedad personalizada. - En las propiedades abreviadas de
animation, a@keyframes. - Vínculos de Más información en los cuadros de información de la documentación.
- Y mucho más.
Estos son algunos de ellos destacados:
Los vínculos pueden tener un estilo diferente. Si no sabes si algo es un vínculo, haz clic en él para averiguarlo.
Consulta la información sobre la herramienta con la documentación, la especificidad y los valores de propiedad personalizada de CSS
Elementos > Estilos muestra información útil sobre la herramienta cuando colocas el cursor sobre elementos específicos.
Ver la documentación de CSS
Para ver información sobre la herramienta con una descripción breve de CSS, coloca el cursor sobre el nombre de la propiedad en la pestaña Estilos.
Haz clic en Más información para ir a una Referencia de CSS de MDN en esta propiedad.
Para desactivar la información sobre la herramienta, marca 
No mostrar.
Para volver a activarlas, ve a 
Configuración > Preferencias > Elementos > 
Mostrar información sobre la documentación de CSS.
Especificidad del selector de vistas
Coloca el cursor sobre un selector para ver la información sobre la herramienta con su peso de especificidad.
Consulta los valores de las propiedades personalizadas
Coloca el cursor sobre un --custom-property para ver su valor en la información.
Ver los CSS no válidos, anulados, inactivos y otros
La pestaña Estilos reconoce muchos tipos de problemas de CSS y los destaca de diferentes maneras.
Consulta Comprender CSS en la pestaña Estilos.
Ver solo el CSS que se aplicó a un elemento
La pestaña Estilos muestra todas las reglas que se aplican a un elemento, incluidas las declaraciones que se anularon. Si no te interesan las declaraciones anuladas, usa la opción Calculado pestaña para ver solo el CSS que se está aplicando realmente a un elemento.
- Selecciona un elemento.
- Ve a la pestaña Calculado del panel Elementos.
Marca la casilla de verificación Mostrar todo para ver todas las propiedades.
Consulta Explicación de CSS en la pestaña Computed.
Ver las propiedades de CSS en orden alfabético
Usa la pestaña Calculado. Consulta el artículo Cómo ver solo el CSS que se aplicó a un elemento.
Ver las propiedades de CSS heredadas
Marca la casilla de verificación Mostrar todo en la pestaña Calculado. Consulte Ver solo el CSS que es realmente se aplica a un elemento.
También puedes desplazarte por la pestaña Estilos y buscar secciones llamadas Inherited from <element_name>.
Consulta las at-rules de CSS
Las reglas “at-rules” son instrucciones de CSS que te permiten controlar su comportamiento. Elementos > Estilos muestra las siguientes reglas arroba en secciones dedicadas:
Ver @property at-rules
La regla-at de CSS @property te permite definir propiedades personalizadas de CSS de forma explícita y registrarlas en una hoja de estilo sin ejecutar ningún JavaScript.
Coloca el cursor sobre el nombre de esa propiedad en la pestaña Estilos para ver información sobre la herramienta con el valor de la propiedad, los descriptores y un vínculo a su registro en la sección @property que se puede contraer, en la parte inferior de la pestaña Estilos.
Para editar una regla @property, haz doble clic en su nombre o valor.
Ver @supports at-rules
La pestaña Estilos muestra las reglas at-rules de CSS @supports si se aplican a un elemento. Por ejemplo, inspecciona el siguiente elemento:
Si tu navegador admite la función lab(), el elemento es verde; de lo contrario, púrpura.
Ver @scope at-rules
La pestaña Estilos muestra las reglas-at-@scope de CSS si se aplican a un elemento.
Las nuevas reglas at @scope forman parte de la especificación de CSS en cascada y herencia de nivel 6. Estas reglas te permiten definir el alcance de los estilos CSS, es decir, aplicar estilos a elementos específicos de forma explícita.
Visualiza la regla @scope en la siguiente vista previa:
- Inspecciona el texto de la tarjeta en la vista previa.
- En la pestaña Estilos, busca la regla
@scope.
En este ejemplo, la regla @scope anula la declaración background-color global de CSS para todos los elementos <p> dentro de elementos con una clase card.
Para editar la regla @scope, haz doble clic en ella.
Ver @font-palette-values at-rules
La regla at-regla de CSS @font-palette-values te permite personalizar los valores predeterminados de la propiedad font-palette. Elementos > Los estilos muestran esta regla arroba en una sección dedicada.
Consulta la sección @font-palette-values en la siguiente vista previa:
- Inspecciona la segunda línea de texto en la vista previa.
- En Estilos, busca la sección
@font-palette-values.
En este ejemplo, los valores de la paleta de fuentes --New anulan los valores predeterminados de la fuente de color.
Para editar los valores personalizados, haz doble clic en ellos.
Ver @position-try at-rules
La regla de CSS @position-try junto con la propiedad position-try-options te permiten definir posiciones de anclaje alternativas para los elementos. Para obtener más información, consulta Presentación de la API de posicionamiento de anclajes de CSS.
Elementos > Styles resuelve y vincula lo siguiente:
- Valores de la propiedad
position-try-optionsen una sección exclusiva de@position-try --name - Valores de la propiedad
position-anchory argumentosanchor()para los elementos correspondientes con atributospopovertarget.
Inspecciona los valores position-try-options y las secciones @position-try en la siguiente vista previa:
popover- En la vista previa, abre el submenú, es decir, haz clic en TU CUENTA y, luego, en VIDRIERA.
- Inspecciona el elemento con
id="submenu"en la vista previa. - En Estilos, busca la propiedad
position-try-optionsy haz clic en su valor--bottom. La pestaña Estilos te lleva a la sección@position-trycorrespondiente. - Haz clic en el vínculo de valor
position-anchoro en los mismos argumentosanchor(). El panel Elementos selecciona el elemento con el atributopopovertargetcorrespondiente, y la pestaña Estilos muestra el CSS del elemento.
Para editar valores, haz doble clic en ellos.
Cómo ver el modelo de cuadro de un elemento
Para ver el modelo de cuadro de un elemento, ve a la pestaña Estilos y haz clic en el botón 
Mostrar barra lateral en la barra de acciones.
Para cambiar un valor, haz doble clic en él.
Buscar y filtrar el CSS de un elemento
Usa el cuadro Filtro en las pestañas Estilos y Calculado para buscar un CSS específico. propiedades o valores.
Para buscar también propiedades heredadas en la pestaña Calculado, marca la casilla de verificación Mostrar todo.
Para navegar por la pestaña Calculado, marca Grupo y agrupa las propiedades filtradas en categorías que se pueden contraer.
Emular una página enfocada
Si cambias el enfoque de la página a Herramientas para desarrolladores, algunos elementos de superposición se ocultan automáticamente si se activan por el foco. Por ejemplo, listas desplegables, menús o selectores de fecha. La opción check_box Emular una página enfocada te permite depurar un elemento de este tipo como si estuviera enfocado.
Intenta emular una página enfocada en esta página de demostración:
- Enfoca el elemento de entrada. Aparecerá otro elemento debajo.
- Abre Herramientas para desarrolladores. La ventana de Herramientas para desarrolladores ahora está enfocada en lugar de la página, por lo que el elemento vuelve a desaparecer.
- En Elementos > Estilos, haz clic en :hov, marca la casilla de verificación check_box Emular una página enfocada y asegúrate de que el elemento de entrada esté seleccionado. Ahora puedes inspeccionar el elemento debajo de él.
También puedes encontrar la misma opción en el panel Renderización.
Activar o desactivar una seudoclase
Para activar o desactivar una seudoclase, como :active, :focus, :focus-within, :target, :hover, :visited o focus-visible, haz lo siguiente:
- Selecciona un elemento.
- En el panel Elementos, ve a la pestaña Estilos.
- Haz clic en :hov.
- Verifica la seudoclase que deseas activar.
En el viewport, puedes ver que Herramientas para desarrolladores aplica la declaración background-color al elemento, aunque no se coloque el cursor sobre él.
Consulta Cómo agregar un seudoestado a una clase para ver un instructivo interactivo.
Cómo ver seudoelementos destacados heredados
Los seudoelementos te permiten dar estilo a partes específicas de los elementos. Los seudoelementos destacados son partes de documentos con una palabra “seleccionada”. y se presentan como "destacadas" para indicar este estado al usuario. Por ejemplo, estos seudoelementos son ::selection, ::spelling-error, ::grammar-error y ::highlight.
Como se mencionó en la especificación, cuando varios estilos entran en conflicto, la cascada determina el estilo ganador.
Para comprender mejor la herencia y la prioridad de las reglas, puedes ver los seudoelementos destacados heredados:
Inspecciona el texto que aparece a continuación.
Heredé el estilo del pseudoelemento destacado de mi madre o padre. ¡Seleccióname!Selecciona una parte del texto de arriba.
En la pestaña Estilos, desplázate hacia abajo hasta la sección
Inherited from ::selection pseudo of....
Ver capas en cascada
Las capas en cascada permiten un control más explícito de tus archivos CSS para evitar conflictos de especificidad del estilo. Esto es útil para bases de código grandes, sistemas de diseño y cuando se administran estilos de terceros en aplicaciones.
Para ver las capas en cascada, inspecciona el siguiente elemento y abre Elementos > Estilos.
En la pestaña Estilos, observa las 3 capas de cascada y sus estilos: page, component y base.
Para ver el orden de las capas, haz clic en su nombre o en el botón 
Activar o desactivar la vista de las capas de CSS.
La capa page tiene la especificidad más alta, por lo que el fondo del elemento es verde.
Ver una página en modo de impresión
Para ver una página en modo de impresión, haz lo siguiente:
- Abre el menú de comandos.
- Comienza a escribir
Renderingy seleccionaShow Rendering. - En el menú desplegable Emular medios CSS, selecciona imprimir.
Consulta los elementos CSS usados y no usados con la pestaña Cobertura
La pestaña Cobertura muestra el CSS que usa una página.
- Presiona Command + Mayúsculas + P (Mac) o Control + Mayúsculas + P (Windows, Linux y ChromeOS) mientras Herramientas para desarrolladores está en foco para abrir el menú Comando.
Comienza a escribir
coverage.
Selecciona Mostrar cobertura. Aparecerá la pestaña Cobertura.
Haz clic en
Volver a cargar.
La página se volverá a cargar y la pestaña Cobertura proporcionará una descripción general de la cantidad de CSS (y JavaScript).
se usan desde cada archivo que carga el navegador.
El verde representa el lenguaje CSS utilizado. El rojo representa CSS sin usar.
Haz clic en un archivo CSS para ver un desglose por línea de lo que usa el CSS en la vista previa anterior.
En la captura de pantalla, las líneas 55 a 57 y 65 a 67 de
devsite-google-blue.cssno están en uso, mientras que las líneas 59 a 63 se usan.
Fuerza el modo de vista previa de impresión
Consulta Cómo forzar las Herramientas para desarrolladores al modo de vista previa de impresión.
Copiar CSS
Desde un solo menú desplegable en la pestaña Estilos, puedes copiar reglas de CSS, declaraciones, propiedades y valores independientes.
Además, puedes copiar las propiedades de CSS en la sintaxis de JavaScript. Esta opción es útil si usas bibliotecas CSS-in-JS.
Para copiar CSS, haz lo siguiente:
- Selecciona un elemento.
- En Elementos > En la pestaña Estilos, haz clic con el botón derecho en una propiedad de CSS.
Selecciona una de las siguientes opciones del menú desplegable:
- Copiar declaración. Copia la propiedad y su valor en la sintaxis de CSS:
css property: value; - Copiar propiedad. Copia solo el nombre
property. - Copiar valor. Copia solo el
value. - Copiar regla. Copia toda la regla de CSS:
css selector[, selector] { property: value; property: value; ... } - Copia la declaración como JS. Copia la propiedad y su valor en la sintaxis de JavaScript:
js propertyInCamelCase: 'value' - Copia todas las declaraciones. Copia todas las propiedades y sus valores en la regla CSS:
css property: value; property: value; ... Copia todas las declaraciones como JS. Copia todas las propiedades y sus valores en la sintaxis de JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
Copia todos los cambios de CSS. Copia los cambios que realices en la pestaña Estilos en todas las declaraciones.
Ver valor calculado. Te dirige a la pestaña Calculado.
- Copiar declaración. Copia la propiedad y su valor en la sintaxis de CSS:
Cambiar CSS
En esta sección, se enumeran todas las formas en las que puedes cambiar el estilo CSS en Elementos > Estilos.
Además, puedes hacer lo siguiente:
- Anula el CSS en todas las cargas de páginas.
- Guarda el CSS modificado en tus fuentes locales en un lugar de trabajo.
Agrega una declaración de CSS a un elemento
Como el orden de las declaraciones afecta el estilo de un elemento, puedes agregar declaraciones en maneras diferentes:
- Agrega una declaración intercalada. Equivale a agregar un atributo
styleal HTML del elemento. - Agrega una declaración a una regla de estilo.
¿Qué flujo de trabajo deberías usar? Para la mayoría de los casos, probablemente quieras usar la función de la declaración de clientes. Las declaraciones intercaladas son más específicas que las externas. garantiza que los cambios se apliquen en el elemento como esperas. Consulta Selector Tipos para obtener más información sobre la especificidad.
Si estás depurando los estilos de un elemento y necesitas probar específicamente lo que sucede cuando se define en distintos lugares, usa el otro flujo de trabajo.
Cómo agregar una declaración intercalada
Para agregar una declaración intercalada, sigue estos pasos:
- Selecciona un elemento.
- En la pestaña Estilos, haz clic entre los corchetes de la sección element.style. El cursor lo que te permite ingresar texto.
- Ingresa un nombre de propiedad y presiona Intro.
Ingresa un valor válido para esa propiedad y presiona Intro. En el árbol del DOM, puedes hacer lo siguiente: verás que se agregó un atributo
styleal elemento.
En la captura de pantalla, se aplicaron las propiedades
margin-topybackground-coloral elemento seleccionado. En el árbol del DOM puedes ver las declaraciones reflejadas en el atributostyledel elemento.
Cómo agregar una declaración a una regla de estilo
Para agregar una declaración a una regla de estilo existente, sigue estos pasos:
- Selecciona un elemento.
- En la pestaña Estilos, haz clic entre los corchetes de la regla de estilo que deseas agregar. la declaración. El cursor se enfoca, lo que te permite ingresar texto.
- Ingresa un nombre de propiedad y presiona Intro.
- Ingresa un valor válido para esa propiedad y presiona Intro.
En la captura de pantalla, una regla de estilo obtiene la nueva declaración border-bottom-style:groove.
Cómo cambiar el nombre o el valor de una declaración
Haz doble clic en el nombre o valor de una declaración para cambiarlo. Consulta Cambia valores enumerables con combinaciones de teclas para combinaciones de teclas que permiten aumentar o disminuir un valor rápidamente en 0.1, 1 10 o 100 unidades.
Cómo cambiar valores que se pueden enumerar con combinaciones de teclas
Mientras editas un valor enumerable de una declaración, por ejemplo, font-size, puedes usar las siguientes combinaciones de teclas para aumentar el valor en una cantidad fija:
- Opción + Arriba (Mac) o Alt + Arriba (Windows y Linux) para aumentar en 0.1.
- Up para cambiar el valor en 1 o en 0.1 si el valor actual está entre -1 y 1.
- Mayúsculas + Arriba para aumentar un 10
- Mayús + Comando + Flecha hacia arriba (Mac) o Control + Mayús + Re Pág (Windows y Linux) para aumentar el valor 100.
Disminuir también funciona. Simplemente reemplaza cada instancia de Up que mencionamos antes por Abajo.
Cambiar valores de longitud
Puedes usar el puntero para cambiar cualquier propiedad con longitud, como ancho, altura, padding, margen o borde.
Para cambiar la unidad de longitud, haz lo siguiente:
- Coloca el cursor sobre el nombre de la unidad y observa que está subrayada.
Haz clic en el nombre de la unidad para seleccionarla en el menú desplegable.
Para cambiar el valor de longitud, haz lo siguiente:
- Coloca el cursor sobre el valor de la unidad y nota que el puntero cambia a una flecha horizontal de dos puntas.
Arrastra horizontalmente para aumentar o disminuir el valor.
Para ajustar el valor en un 10, mantén presionada la tecla Mayúsculas mientras lo arrastras.
Cómo agregar una clase a un elemento
Para agregar una clase a un elemento, haz lo siguiente:
- Selecciona el elemento en el árbol del DOM.
- Haz clic en .cls.
- Ingresa el nombre de la clase en el cuadro Add New Class.
- Presiona Intro.
Emula las preferencias de los temas claro y oscuro, y habilita el modo oscuro automático
Para activar o desactivar el modo oscuro automático o emular la preferencia del usuario por los temas oscuros o claros, haz lo siguiente:
- En Elementos > En la pestaña Estilos, haz clic en
Activar o desactivar las emulaciones de renderización comunes.
Selecciona una de las siguientes opciones de la lista desplegable:
- prefers-color-scheme: claro. Indica que el usuario prefiere el tema claro.
- prefers-color-scheme: oscuro. Indica que el usuario prefiere el tema oscuro.
- Modo oscuro automático. Muestra tu página en modo oscuro, incluso si no lo implementaste. Además, configura
prefers-color-schemecomodarkautomáticamente.
Este menú desplegable es una combinación de teclas para las opciones Emula la función de medios de CSS prefers-color-scheme y Habilitar modo oscuro automático de la pestaña Renderización.
Activar o desactivar una clase
Para habilitar o inhabilitar una clase en un elemento, haz lo siguiente:
- Selecciona el elemento en el árbol del DOM.
- Abre la sección Clases de elementos. Consulta Cómo agregar una clase a un elemento. Debajo del botón Agregar nuevo Class son todas las clases que se aplican a este elemento.
- Activa o desactiva la casilla de verificación junto a la clase que quieras habilitar o inhabilitar.
Agregar una regla de estilo
Para agregar una nueva regla de estilo, sigue estos pasos:
- Selecciona un elemento.
- Haga clic en Nueva regla de estilo.
Herramientas para desarrolladores inserta un
nueva regla debajo de la regla element.style.
En la captura de pantalla, las Herramientas para desarrolladores agrega la regla de estilo h1.devsite-page-title después de hacer clic en New Style Rule.
Elige a qué hoja de estilo agregar una regla
Cuando agregues una nueva regla de estilo, mantén presionada la opción Nueva regla de estilo.
para elegir la hoja de estilo
para agregar la regla de estilo.
Cómo activar o desactivar una declaración
Para activar o desactivar una sola declaración, haz lo siguiente:
- Selecciona un elemento.
- En la pestaña Estilos, coloca el cursor sobre la regla que define la declaración. Las casillas de verificación aparecerán a continuación a cada declaración.
- Marca o desmarca la casilla de verificación junto a la declaración. Cuando borras una declaración, Herramientas para desarrolladores tachado para indicar que ya no está activo.
En la captura de pantalla, la propiedad color para el elemento seleccionado actualmente está desactivada.
Editar los seudoelementos ::view-transition durante una animación
Consulta la sección correspondiente en Animaciones.
Para obtener más información, consulta Transiciones fluidas y simples con la API de View Transitions.
Alinear los elementos de la cuadrícula y su contenido con el Editor de cuadrícula
Consulta la sección correspondiente en la cuadrícula de Inspeccionar CSS.
Cómo cambiar los colores con el Selector de color
Consulta Cómo inspeccionar y depurar colores HD y que no sean HD con el selector de color.
Cómo cambiar el valor de ángulo con el reloj angular
El reloj angular proporciona una GUI para cambiar las <angle> en los valores de las propiedades de CSS.
Para abrir el Reloj angular, haz lo siguiente:
- Selecciona un elemento con la declaración de ángulo.
En la pestaña Estilos, busca la declaración
transformobackgroundque deseas cambiar. Haz clic en el cuadro Vista previa del ángulo junto al valor del ángulo.
Los relojes pequeños que aparecen a la izquierda de
-5degy0.25turnson las vistas previas de los ángulos.Haz clic en la vista previa para abrir Reloj angular.
Para cambiar el valor del ángulo, haz clic en el círculo Reloj angular o desplaza el mouse hasta aumentar / disminuir el valor del ángulo en 1.
Hay más combinaciones de teclas para cambiar el valor del ángulo. Obtén más información en el panel Estilos. combinaciones de teclas.
Cómo cambiar las sombras de cuadro y texto con el editor de sombras
El editor de sombras proporciona una GUI para cambiar las declaraciones de CSS text-shadow y box-shadow.
Para cambiar las sombras con el editor de sombras, haz lo siguiente:
Selecciona un elemento con una declaración paralela. Por ejemplo, selecciona el siguiente elemento.
En la pestaña Estilos, busca un ícono de sombra
junto a la declaración text-shadowobox-shadow.
Haz clic en el ícono de la sombra para abrir el editor de sombras.
Cambia las propiedades de las sombras:
- Type (solo para
box-shadow). Selecciona Outset o Inset. - Compensaciones X e Y. Arrastra el punto azul o especifica valores.
- Desenfoque: Arrastra el control deslizante o especifica un valor.
- Spread (solo para
box-shadow) Arrastra el control deslizante o especifica un valor.
- Type (solo para
Observa los cambios que se aplicaron al elemento.
Cómo editar tiempos de animación y transición con el editor de aceleración
El Editor de aceleración proporciona una GUI para cambiar los valores de transition-timing-function y animation-timing-function.
Para abrir el Editor de aceleración, sigue estos pasos:
- Selecciona un elemento con una declaración de función de sincronización, como el elemento
<body>de esta página. - En la pestaña Estilos, busca el ícono púrpura
junto a las declaraciones transition-timing-function,animation-timing-functiono la propiedad abreviadatransition.
- Haz clic en el ícono para abrir el Editor de aceleración:
Usa ajustes predeterminados para ajustar los tiempos
Para ajustar los tiempos con un clic, usa los ajustes predeterminados del Editor de aceleración:
- En el Editor de aceleración, para establecer un valor de palabra clave, haz clic en uno de los botones del selector:
- .
lineal- Entrada lenta
- entrada lenta
- salida lenta
En el selector de ajustes predeterminados, haz clic en los botones
o 
para elegir uno de los siguientes:- Ajustes predeterminados lineales:
elastic,bounceoemphasized. - Ajustes predeterminados de Cubic Bezier:
- Ajustes predeterminados lineales:
| Palabra clave de tiempo | Valor preestablecido | Cúbica de Bézier |
|---|---|---|
| acelerar/ralentizar | Seno | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
| In-out, cuadrático | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
| In-Out, Cubic | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
| Rápido y lento | cubic-bezier(0.4, 0, 0.2, 1) |
|
| Inhala, espalda | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
| acelerar | En, seno | cubic-bezier(0.47, 0, 0.75, 0.72) |
| In, cuadrático | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
| In, Cubic | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
| Entrante, Atrás | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
| Rápido y lineal | cubic-bezier(0.4, 0, 1, 1) |
|
| ralentizar | Fuera, seno | cubic-bezier(0.39, 0.58, 0.57, 1) |
| Salida, cuadrática | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
| Out, Cubic | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
| Salida lineal, entrada lenta | cubic-bezier(0, 0, 0.2, 1) |
|
| Afuera, atrás | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
Configurar tiempos personalizados
Para establecer valores personalizados para las funciones de tiempo, usa los puntos de control en las líneas:
Para las funciones lineales, haz clic en cualquier parte de la línea para agregar un punto de control y arrastrarlo. Haz doble clic para quitar el punto.
En las funciones de Bézier cúbicas, arrastra uno de los puntos de control.
Cualquier cambio activa una animación de bola en Preview en la parte superior del editor.
(Experimental) Copiar cambios de CSS
Con este experimento habilitado, la pestaña Estilos destaca en verde tus cambios de CSS.
Para copiar un solo cambio en la declaración de CSS, coloca el cursor sobre la declaración destacada y haz clic en el botón 
Copy.
Para copiar todos los cambios de CSS en las declaraciones a la vez, haz clic con el botón derecho en cualquier declaración y selecciona Copiar todos los cambios de CSS.
Además, puedes realizar un seguimiento de los cambios que realices con la pestaña Cambios.