Referencia de las funciones de CSS

Descubre nuevos flujos de trabajo en esta referencia integral de las funciones de las Herramientas para desarrolladores de Chrome relacionadas con la visualización y el cambio de CSS.

Consulta Cómo ver y cambiar 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 que está destacado en azul en el árbol del DOM es el elemento seleccionado. A la derecha, los estilos del elemento se muestran en la pestaña Styles. A la izquierda, el elemento se destaca en el viewport, pero solo porque el mouse se encuentra sobre él en el árbol del DOM.

Consulta Cómo ver el CSS de un elemento para ver un instructivo.

Existen muchas formas de seleccionar un elemento:

• En el viewport, haz clic con el botón derecho en el elemento y selecciona Inspeccionar.
• En DevTools, 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 en el viewport.
• En Herramientas para desarrolladores, haz clic en el elemento del árbol del DOM.
• En DevTools, ejecuta una consulta como document.querySelector('p') en la Consola, haz clic con el botón derecho en el resultado y, luego, selecciona Mostrar en el panel Elementos.

Ver CSS

Usa las pestañas Elementos > Estilos y Calculado 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 otros lugares, incluidos, entre otros, los siguientes:

• Junto a las reglas de CSS, a las hojas de diseño y a las fuentes de CSS Estos vínculos abren el panel Fuentes. Si la hoja de estilo está reducida, consulta Cómo hacer que un archivo reducido sea legible.
• En las secciones Heredado de…, a los elementos principales
• En las llamadas a var(), a las declaraciones de propiedades personalizadas
• 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:

Los vínculos pueden tener un diseño diferente. Si no tienes certeza de que un elemento sea un vínculo, haz clic en él para averiguarlo.

Ver información sobre herramientas con documentación de CSS, especificidad y valores de propiedades personalizadas

Elementos > Estilos muestra información sobre herramientas con datos útiles cuando colocas el cursor sobre elementos específicos.

Ver la documentación de CSS

Para ver una información sobre herramientas con una breve descripción 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 sobre esta propiedad.

Para desactivar las sugerencias, marca No mostrar.

Para volver a activarlas, marca Configuración > Preferencias > Elementos > Mostrar la información sobre herramientas de la documentación de CSS.

Especificidad del selector de vistas

Coloca el cursor sobre un selector en la pestaña Estilos, incluidos los selectores superiores en las reglas de CSS anidadas, las reglas anidadas heredadas y las reglas @nested-declarations, para ver un cuadro de información con su peso de especificidad y destacar los elementos que coinciden en el viewport.

Consulta los valores de las propiedades personalizadas

Coloca el cursor sobre un --custom-property para ver su valor en un cuadro de información.

Cómo ver 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 Comprende el CSS en la pestaña Estilos.

Cómo ver solo el CSS que realmente se aplica a un elemento

En la pestaña Styles, se muestran todas las reglas que se aplican a un elemento, incluidas las declaraciones que se anularon. Cuando no te interesen las declaraciones anuladas, usa la pestaña Calculado para ver solo el CSS que se aplica realmente a un elemento.

1. Selecciona un elemento.
2. Ve a la pestaña Computed en el panel Elements.

Marca la casilla de verificación Show All para ver todas las propiedades.

Consulta Información sobre CSS en la pestaña Calculado.

Cómo ver las propiedades de CSS en orden alfabético

Usa la pestaña Computed. Consulta Cómo ver solo el CSS que se aplica realmente a un elemento.

Cómo ver las propiedades de CSS heredadas

Marca la casilla de verificación Mostrar todo en la pestaña Calculado. Consulta Cómo ver solo el CSS que se aplica realmente a un elemento.

Como alternativa, desplázate por la pestaña Styles y busca las secciones llamadas Inherited from <element_name>.

Cómo ver las reglas arroba de CSS

Las reglas arroba son instrucciones de CSS que te permiten controlar el comportamiento de CSS. Elements > Styles muestra las siguientes reglas @ en secciones dedicadas:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

Ver @property reglas arroba

La regla @ de CSS @property te permite definir propiedades personalizadas de CSS de forma explícita y registrarlas en una hoja de estilo sin ejecutar JavaScript.

Coloca el cursor sobre el nombre de esa propiedad en la pestaña Estilos para ver un cuadro de información con el valor, los descriptores y un vínculo a su registro en la sección @property contraíble en la parte inferior de la pestaña Estilos.

Para editar una regla de @property, haz doble clic en su nombre o valor.

Ver reglas arroba de @supports

La pestaña Estilos muestra las reglas arroba 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 será verde; de lo contrario, será morado.

Cómo ver las reglas @scope

En la pestaña Estilos, se muestran las reglas @ de @scope CSS si se aplican a un elemento.

Las nuevas reglas-at @scope forman parte de la especificación de nivel 6 de herencia y cascada de CSS. Estas reglas te permiten definir el alcance de los estilos CSS, es decir, aplicar estilos de forma explícita a elementos específicos.

Consulta la regla @scope en la siguiente vista previa:

1. Inspecciona el texto de la tarjeta en la vista previa.
2. En la pestaña Estilos, busca la regla @scope.

En este ejemplo, la regla @scope anula la declaración global de CSS background-color para todos los elementos <p> dentro de los elementos con una clase card.

Para editar la regla @scope, haz doble clic en ella.

Cómo ver las reglas @font-palette-values

La regla @ de CSS @font-palette-values te permite personalizar los valores predeterminados de la propiedad font-palette. Elementos > Estilos muestra esta regla-at en una sección dedicada.

Consulta la sección @font-palette-values en la siguiente vista previa:

1. Inspecciona la segunda línea de texto en la vista previa.
2. 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 tus valores personalizados, haz doble clic en ellos.

Cómo ver las reglas @position-try

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 Presentamos la API de posicionamiento de anclas de CSS.

Elementos > Estilos resuelve y vincula lo siguiente:

• Valores de la propiedad position-try-options en una sección @position-try --name dedicada
• Valores de la propiedad position-anchor y argumentos de anchor() para los elementos correspondientes con atributos popovertarget

Inspecciona los valores de position-try-options y las secciones de @position-try en la siguiente vista previa:

1. En la vista previa, abre el submenú, es decir, haz clic en TU CUENTA y, luego, en STOREFRONT.
2. Inspecciona el elemento con id="submenu" en la vista previa.
3. En Estilos, busca la propiedad position-try-options y haz clic en su valor --bottom. La pestaña Estilos te lleva a la sección @position-try correspondiente.
4. Haz clic en el vínculo del valor position-anchor o en los mismos argumentos anchor(). El panel Elementos selecciona el elemento con el atributo popovertarget correspondiente, y la pestaña Estilos muestra el CSS del elemento.

Para editar los valores, haz doble clic en ellos.

Cómo ver el modelo de caja 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.

Cómo buscar y filtrar el CSS de un elemento

Usa el cuadro Filter en las pestañas Styles y Computed para buscar selectores CSS específicos (incluidos los selectores superiores en las reglas anidadas), 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 Computed, agrupa las propiedades filtradas en categorías contraíbles marcando Group.

Emula una página enfocada

Si cambias el enfoque de la página a las Herramientas para desarrolladores, algunos elementos de superposición se ocultan automáticamente si se activan con el enfoque. 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:

1. Enfoca el elemento de entrada. Aparece otro elemento debajo.
2. Abre las 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.
3. En Elementos > Estilos, haz clic en :hov, marca check_box Emular una página enfocada y asegúrate de que el elemento de entrada esté seleccionado. Ahora puedes inspeccionar el elemento que se encuentra debajo.

También puedes encontrar la misma opción en el panel Renderización.

Para descubrir más formas de congelar un elemento, consulta Cómo congelar la pantalla y cómo inspeccionar los elementos que desaparecen.

Activa o desactiva una pseudoclase

Para activar o desactivar una seudoclase, haz lo siguiente:

1. Selecciona un elemento.
2. En el panel Elements, ve a la pestaña Styles.
3. Haz clic en :hov.
4. Marca la pseudoclase que quieras activar.

En este ejemplo, puedes ver que las Herramientas para desarrolladores aplican la declaración background-color al elemento, aunque no se coloque el cursor sobre él.

En la pestaña Estilos, se muestran las siguientes seudoclases para todos los elementos:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Además, algunos elementos pueden tener sus propias pseudoclases. Cuando seleccionas un elemento de este tipo, la pestaña Estilos muestra una sección Forzar estado específico del elemento que puedes expandir y activar pseudoclases específicas del elemento.

Consulta Agrega un pseudoestado a una clase para ver un instructivo interactivo.

Cómo ver los seudoelementos de resaltado heredados

Los seudoelementos te permiten aplicar diseño a partes específicas de los elementos. Los seudoelementos destacados son porciones del documento con el estado "seleccionado" y se les aplica el estilo "destacado" para indicarle este estado al usuario. Por ejemplo, estos seudoelementos son ::selection, ::spelling-error, ::grammar-error y ::highlight.

Como se menciona 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:

1. Inspecciona el texto que aparece a continuación.

   Heredé el diseño del seudoelemento de destacado de mi elemento superior. Seleccióname

2. Selecciona una parte del texto anterior.

3. En la pestaña Estilos, desplázate hacia abajo hasta encontrar la sección Inherited from ::selection pseudo of....

Cómo ver las capas en cascada

Las capas en cascada permiten un control más explícito de tus archivos CSS para evitar conflictos de especificidad de estilo. Esto es útil para bases de código grandes, sistemas de diseño y cuando se administran estilos de terceros en las aplicaciones.

Para ver las capas en cascada, inspecciona el siguiente elemento y abre Elementos > Estilos.

En la pestaña Estilos, consulta las 3 capas en cascada y sus estilos: page, component y base.

Para ver el orden de las capas, haz clic en el nombre de la capa 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.

Cómo ver una página en modo de impresión

Para ver una página en el modo de impresión, haz lo siguiente:

1. Abre el menú de comandos.
2. Comienza a escribir Rendering y selecciona Show Rendering.
3. En el menú desplegable Emulate CSS Media, selecciona print.

Cómo ver el CSS usado y no usado con la pestaña Cobertura

La pestaña Cobertura te muestra qué CSS usa realmente una página.

1. Presiona Comando + Mayúsculas + P (Mac) o Control + Mayúsculas + P (Windows, Linux y ChromeOS) mientras las Herramientas para desarrolladores están enfocadas para abrir el menú de comandos.

2. Comienza a escribir coverage.

   

3. Selecciona Mostrar cobertura. Aparecerá la pestaña Cobertura.

   

4. Haz clic en Volver a cargar. La página se vuelve a cargar y la pestaña Coverage proporciona una descripción general de la cantidad de CSS (y JavaScript) que se usa de cada archivo que carga el navegador.

   

   El verde representa el CSS usado. El color rojo representa el CSS sin usar.

5. Haz clic en un archivo CSS para ver un desglose línea por línea del CSS que usa en la vista previa de arriba.

   

   En la captura de pantalla, las líneas de la 55 a la 57 y de la 65 a la 67 de devsite-google-blue.css no se usan, mientras que las líneas de la 59 a la 63 sí se usan.

Forzar 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 Styles, puedes copiar reglas, declaraciones, propiedades y valores de CSS por separado.

Además, puedes copiar propiedades de CSS en la sintaxis de JavaScript. Esta opción es útil si usas bibliotecas de CSS-in-JS.

Para copiar CSS, sigue estos pasos:

1. Selecciona un elemento.
2. En la pestaña Elementos > Estilos, haz clic con el botón derecho en una propiedad de CSS.

3. Selecciona una de las siguientes opciones del menú desplegable:

   • Copia de la declaración Copia la propiedad y su valor en la sintaxis de CSS: css property: value;
   • Copia la propiedad. Copia solo el nombre de property.
   • Copiar valor. Solo copia el value.
   • Copiar regla. Copia toda la regla de CSS: css selector[, selector] { property: value; property: value; ... }
   • Copiar 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 de CSS: css property: value; property: value; ...

   • Copiar todas las declaraciones como JS. Copia todas las propiedades y sus valores en la sintaxis de JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Copiar todos los cambios de CSS. Copia los cambios que realizas en la pestaña Styles en todas las declaraciones.

   • Consulta el valor calculado. Te lleva a la pestaña Computed.

Cambiar CSS

En esta sección, se enumeran todas las formas en que puedes cambiar el CSS en Elements > Styles.

Además, puedes hacer lo siguiente:

• Anula el CSS en las cargas de página.
• Guarda el CSS modificado en tus fuentes locales en un espacio de trabajo.

Cómo cambiar el CSS con la finalización de código

Para experimentar con combinaciones más complejas de propiedades de CSS, como gradientes o sombras de cuadros, sin recordar su sintaxis exacta, o para crear rápidamente diseños de cuadrícula y flexibles, que se basan en varias propiedades relacionadas, puedes comenzar a escribir una propiedad de CSS y usar la finalización de código.

Cómo agregar una declaración de CSS a un elemento

Dado que el orden de las declaraciones afecta el estilo de un elemento, puedes agregar declaraciones de diferentes maneras:

• Agrega una declaración intercalada. Equivale a agregar un atributo style al código HTML del elemento.
• Agrega una declaración a una regla de estilo.

¿Qué flujo de trabajo deberías usar? En la mayoría de los casos, probablemente quieras usar el flujo de trabajo de declaración intercalada. Las declaraciones intercaladas tienen una especificidad mayor que las externas, por lo que el flujo de trabajo intercalado garantiza que los cambios surtan efecto en el elemento como se espera. Consulta Tipos de selectores para obtener más información sobre la especificidad.

Si estás depurando los estilos de un elemento y necesitas probar específicamente qué sucede cuando se define una declaración en diferentes lugares, usa el otro flujo de trabajo.

Agrega una declaración intercalada

Para agregar una declaración intercalada, haz lo siguiente:

1. Selecciona un elemento.
2. En la pestaña Estilos, haz clic entre los corchetes de la sección element.style. El cursor se enfoca, lo que te permite ingresar texto.
3. Ingresa un nombre de propiedad y presiona Intro.

4. Ingresa un valor válido para esa propiedad y presiona Intro. En el árbol del DOM, puedes ver que se agregó un atributo style al elemento.

   

   En la captura de pantalla, se aplicaron las propiedades margin-top y background-color al elemento seleccionado. En el árbol del DOM, puedes ver las declaraciones reflejadas en el atributo style del elemento.

Agrega una declaración a una regla de estilo

Para agregar una declaración a una regla de estilo existente, haz lo siguiente:

1. Selecciona un elemento.
2. En la pestaña Styles, haz clic entre los corchetes de la regla de estilo a la que deseas agregar la declaración. El cursor se enfoca, lo que te permite ingresar texto.
3. Ingresa un nombre de propiedad y presiona Intro.
4. Ingresa un valor válido para esa propiedad y presiona Intro.

En la captura de pantalla, una regla de diseño 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 el valor de una declaración para cambiarlo. Consulta Cómo cambiar valores enumerables con combinaciones de teclas para conocer las combinaciones de teclas que permiten aumentar o disminuir rápidamente un valor en 0.1, 1, 10 o 100 unidades.

Cómo cambiar valores enumerables 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:

• Option + Up (Mac) o Alt + Up (Windows, Linux) para aumentar en 0.1
• Hacia arriba para cambiar el valor en 1 o en 0.1 si el valor actual está entre -1 y 1
• Mayúsculas+Arriba para aumentar de a 10.
• Mayúsculas + Comando + Arriba (Mac) o Control + Mayúsculas + Re Pág (Windows, Linux) para aumentar el valor en 100.

La disminución también funciona. Solo reemplaza cada instancia de Up mencionada anteriormente por Down.

Cómo cambiar los valores de longitud

Puedes usar el puntero para cambiar cualquier propiedad con longitud, como el ancho, la altura, el padding, el margen o el borde.

Para cambiar la unidad de longitud, sigue estos pasos:

1. Coloca el cursor sobre el nombre de la unidad y observa que está subrayado.

2. Haz clic en el nombre de la unidad para seleccionar una en el menú desplegable.

Para cambiar el valor de longitud, sigue estos pasos:

1. Coloca el cursor sobre el valor de la unidad y observa que el puntero cambia a una flecha horizontal de dos puntas.

2. Arrastra horizontalmente para aumentar o disminuir el valor.

Para ajustar el valor en 10, mantén presionada la tecla Mayús mientras arrastras.

Cómo agregar una clase a un elemento

Para agregar una clase a un elemento, sigue estos pasos:

1. Selecciona el elemento en el árbol del DOM.
2. Haz clic en .cls.
3. Ingresa el nombre de la clase en el cuadro Agregar clase nueva.
4. Presiona Intro.

Emula las preferencias de tema claro y oscuro, y habilita el modo oscuro automático

Para activar o desactivar el modo oscuro automático, o bien emular la preferencia del usuario por temas claros u oscuros, haz lo siguiente:

1. En la pestaña Elements > Styles, haz clic en Toggle common rendering emulations.

2. Selecciona una de las siguientes opciones en la lista desplegable:

   • prefers-color-scheme: light. Indica que el usuario prefiere el tema claro.
   • prefers-color-scheme: dark. 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, establece prefers-color-scheme en dark automáticamente.

Este menú desplegable es un acceso directo a las opciones Emular la función de medios CSS prefers-color-scheme y Habilitar el modo oscuro automático de la pestaña Renderización.

Cómo activar o desactivar una clase

Para habilitar o inhabilitar una clase en un elemento, haz lo siguiente:

1. Selecciona el elemento en el árbol del DOM.
2. Abre la sección Clases de elementos. Consulta Cómo agregar una clase a un elemento. Debajo del cuadro Add New Class, se encuentran todas las clases que se aplican a este elemento.
3. Marca o desmarca la casilla de verificación junto a la clase que deseas habilitar o inhabilitar.

Cómo agregar una regla de estilo

Para agregar una regla de diseño nueva, haz lo siguiente:

1. Selecciona un elemento.
2. Haz clic en Nueva regla de estilo . Las Herramientas para desarrolladores insertan una regla nueva debajo de la regla element.style.

En la captura de pantalla, las Herramientas para desarrolladores agregan 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 presionado New Style Rule para elegir a qué hoja de estilo agregar la regla de estilo.

Activar o desactivar una declaración

Para activar o desactivar una sola declaración, haz lo siguiente:

1. Selecciona un elemento.
2. En la pestaña Diseños, coloca el cursor sobre la regla que define la declaración. Aparecerán casillas de verificación junto a cada declaración.
3. Marca o desmarca la casilla de verificación junto a la declaración. Cuando borras una declaración, Herramientas para desarrolladores la tacha para indicar que ya no está activa.

En la captura de pantalla, la propiedad color del elemento seleccionado actualmente está desactivada.

Edita 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 sencillas con la API de View Transitions.

Alinea los elementos de la cuadrícula y su contenido con el editor de cuadrículas

Consulta la sección correspondiente en Inspecciona la cuadrícula de CSS.

Cómo cambiar los colores con el selector de color

Consulta Inspecciona y depura colores HD y no HD con el selector de color.

Cómo cambiar el valor del ángulo con el reloj de ángulo

Angle Clock proporciona una GUI para cambiar los <angle> en los valores de las propiedades de CSS.

Para abrir el Reloj de ángulo, haz lo siguiente:

1. Selecciona un elemento con una declaración de ángulo.

2. En la pestaña Estilos, busca la declaración transform o background que quieras cambiar. Haz clic en la casilla Vista previa del ángulo junto al valor del ángulo.

   

   Los relojes pequeños a la izquierda de -5deg y 0.25turn son las vistas previas del ángulo.

3. Haz clic en la vista previa para abrir el reloj de ángulo.

   

4. Para cambiar el valor del ángulo, haz clic en el círculo Angle Clock o desplaza el mouse para aumentar o disminuir el valor del ángulo en 1.

5. Hay más combinaciones de teclas para cambiar el valor del ángulo. Obtén más información en Combinaciones de teclas del panel Estilos.

Cómo cambiar las sombras de las cajas y el texto con el Editor de sombras

El Editor de sombras proporciona una GUI para cambiar las declaraciones CSS text-shadow y box-shadow.

Para cambiar las sombras con el Editor de sombras, sigue estos pasos:

1. Selecciona un elemento con una declaración de sombra. Por ejemplo, selecciona el siguiente elemento.

2. En la pestaña Estilos, busca un ícono de sombra junto a la declaración text-shadow o box-shadow.

   

3. Haz clic en el ícono de sombra para abrir el editor de sombras.

   

4. Cambia las propiedades de la sombra:

   • Tipo (solo para box-shadow). Elige Exterior o Interior.
   • Compensaciones X e Y. Arrastra el punto azul o especifica los valores.
   • Desenfoque Arrastra el control deslizante o especifica un valor.
   • Dispersión (solo para box-shadow): Arrastra el control deslizante o especifica un valor.

5. Observa los cambios aplicados al elemento.

Edita los 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, haz lo siguiente:

1. Selecciona un elemento con una declaración de función de sincronización, como el elemento <body> en esta página.
2. En la pestaña Estilos, busca el ícono morado junto a las declaraciones transition-timing-function, animation-timing-function o la propiedad abreviada transition.
3. 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 en el Editor de aceleración:

1. En el Editor de aceleración, para establecer un valor de palabra clave, haz clic en uno de los botones del selector:
   • lineal
   • ease-in-out
   • ease-in
   • ease-out

2. En el selector de ajustes predeterminados, haz clic en los botones o para elegir uno de los siguientes ajustes predeterminados:

   • Ajustes predeterminados lineales: elastic, bounce o emphasized.
   • Ajustes predeterminados de Bézier cúbica:

Palabra clave de tiempo	Ajuste predeterminado	Cúbica de Bézier
acelerar/ralentizar	Entrada/salida, seno	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Entrada y salida, cuadrática	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Cúbica de entrada y salida	cubic-bezier(0.65, 0.05, 0.36, 1)
	Salida rápida, entrada lenta	cubic-bezier(0.4, 0, 0.2, 1)
	Entrada, salida y vuelta	cubic-bezier(0.68, -0.55, 0.27, 1.55)
acelerar	Entrada, seno	cubic-bezier(0.47, 0, 0.75, 0.72)
	Entrada, cuadrática	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	Pulgada cúbica	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Salida rápida, entrada lineal	cubic-bezier(0.4, 0, 1, 1)
ralentizar	Salida, seno	cubic-bezier(0.39, 0.58, 0.57, 1)
	Cuadrática de salida	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Salida, cúbica	cubic-bezier(0.22, 0.61, 0.36, 1)
	Salida lineal, entrada lenta	cubic-bezier(0, 0, 0.2, 1)
	Fuera, atrás	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Configura tiempos personalizados

Para establecer valores personalizados para las funciones de sincronización, usa los puntos de control en las líneas:

• En el caso de las funciones lineales, haz clic en cualquier parte de la línea para agregar un punto de control y arrástralo. Haz doble clic para quitar el punto.

  

• Para las funciones de curva de Bézier cúbica, arrastra uno de los puntos de control.

  

Cualquier cambio activa una animación de pelota en la vista previa que se encuentra en la parte superior del editor.

(Experimental) Copiar cambios de CSS

Con este experimento habilitado, la pestaña Diseños destaca los cambios de CSS en verde.

Para copiar un solo cambio de declaración de CSS, coloca el cursor sobre la declaración destacada y haz clic en el botón Copiar.

Para copiar todos los cambios de CSS en todas 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 hacer un seguimiento de los cambios que realices con la pestaña Cambios.