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 se destaca 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 Diseños. 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.

Hay muchas formas de seleccionar un elemento:

• En tu ventana gráfica, 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, Linux) y, luego, haz clic en el elemento en la ventana gráfica.
• 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 Elements > Styles y Computed para ver las reglas de CSS y diagnosticar problemas de CSS.

Navega 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á comprimida, consulta Cómo hacer que un archivo comprimido sea legible.
• En las secciones Heredado de…, a los elementos principales
• En las llamadas a var(), a las declaraciones de propiedad personalizada
• En las propiedades abreviadas de animation, a @keyframes.
• Vínculos de Más información en las sugerencias sobre herramientas de la documentación
• Y mucho más.

Estos son algunos de ellos:

Los vínculos pueden tener un diseño diferente. Si no sabes con certeza si algo es un vínculo, intenta hacer clic en él para averiguarlo.

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

Elementos > Estilos muestra información útil en ventanas emergentes 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 sugerencia de documentación de CSS.

Cómo ver la especificidad del selector

Coloca el cursor sobre un selector para ver una información sobre herramientas con su peso de especificidad.

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

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

En la pestaña Estilos, 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 Calculado en el panel Elementos.

Marca la casilla de verificación Mostrar todo para ver todas las propiedades.

Consulta Cómo comprender el CSS en la pestaña Computed.

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

Usa la pestaña Calculado. Consulta Cómo ver solo el CSS que se aplica 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 a un elemento.

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

Consulta las @reglas de CSS

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

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

Consulta las reglas @ de @property

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

Coloca el cursor sobre el nombre de esa propiedad en la pestaña Estilos para ver una sugerencia 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.

Consulta las reglas @ de @supports

En la pestaña Estilos, se muestran las reglas @ 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, es morado.

Consulta las reglas @ de @scope

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

Las nuevas @scope at-rules forman parte de la especificación CSS Cascading and Inheritance Level 6. 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 Styles, 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.

Consulta las reglas @ de @font-palette-values

La regla @ @font-palette-values de CSS te permite personalizar los valores predeterminados de la propiedad font-palette. Elements > Styles muestra esta regla @ 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 coloreada.

Para editar tus valores personalizados, haz doble clic en ellos.

Consulta las reglas @ de @position-try

La regla CSS @position-try, junto con la propiedad position-try-options, te permite definir posiciones de anclaje alternativas para los elementos. Para obtener más información, consulta Presentamos la API de posicionamiento de anclaje de CSS.

Elements > Styles 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 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 Elements selecciona el elemento con el atributo popovertarget correspondiente, y la pestaña Styles 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 caja 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 Filtro en las pestañas Estilos y Calculado para buscar propiedades o valores de CSS específicos.

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, agrupa las propiedades filtradas en categorías contraíbles marcando Grupo.

Cómo emular una página enfocada

Si cambias el enfoque de la página a Herramientas para desarrolladores, algunos elementos de la superposición se ocultan automáticamente si se activan por 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 como si estuviera en primer plano.

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. Ahora la ventana de Herramientas para desarrolladores está en primer plano en lugar de la página, por lo que el elemento vuelve a desaparecer.
3. En Elements > Styles, haz clic en :hov, marca check_box Emulate a focused page 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 inmovilizar un elemento, consulta Cómo inmovilizar la pantalla y analizar los elementos que desaparecen.

Cómo activar o desactivar una seudoclase

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 seudoclase que quieras activar.

En este ejemplo, puedes ver que Herramientas para desarrolladores aplica la declaración background-color al elemento, aunque el elemento no esté realmente en estado de desplazamiento.

En la pestaña Styles, 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 seudoclases. Cuando seleccionas un elemento de este tipo, la pestaña Estilos muestra una sección Forzar un estado específico del elemento que puedes expandir y activar pseudoclases específicas del elemento.

Consulta Cómo agregar un seudoestado a una clase para ver un instructivo interactivo.

Cómo ver los seudoelementos destacados heredados

Los seudoelementos te permiten aplicar estilos 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 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 de resaltado heredados:

1. Revisa el texto a continuación.

   Heredé el diseño del seudoelemento de destacado de mi elemento superior. ¡Elígeme!

2. Selecciona una parte del texto anterior.

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

Cómo ver las capas en cascada

Las capas de cascada permiten un control más explícito de tus archivos CSS para evitar conflictos de especificidad de diseño. 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 Elements > Styles.

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 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 sin usar con la pestaña Coverage

En la pestaña Coverage, se muestra qué CSS usa realmente una página.

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

2. Comienza a escribir coverage.

   

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

   

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

   

   El color verde representa el CSS utilizado. 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 anterior.

   

   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

En un solo menú desplegable de la pestaña Styles, puedes copiar reglas, declaraciones, propiedades y valores de CSS separados.

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

Para copiar el CSS, sigue estos pasos:

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

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

   • Copiar declaración Copia la propiedad y su valor en sintaxis CSS: css property: value;
   • Copiar propiedad Copia solo el nombre de property.
   • Copiar valor Copia solo el value.
   • Copiar regla Copia toda la regla de CSS: css selector[, selector] { property: value; property: value; ... }
   • Copiar la declaración como JS Copia la propiedad y su valor en sintaxis de JavaScript: js propertyInCamelCase: 'value'
   • Copiar todas las declaraciones Copia todas las propiedades y sus valores en la regla CSS: css property: value; property: value; ...

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

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

   • Consultar el valor calculado Te lleva a la pestaña Calculado.

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áginas.
• Guarda el CSS modificado en tus fuentes locales en un espacio de trabajo.

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

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

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

Dado que el orden de las declaraciones afecta la forma en que se aplica el diseño a 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.

Cómo agregar una declaración intercalada

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

1. Selecciona un elemento.
2. En la pestaña Styles, 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.

Cómo agregar 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 Estilos, 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 cambiarla. 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 los siguientes atajos de teclado para aumentar el valor en una cantidad fija:

• Opción + Arriba (Mac) o Alt + Arriba (Windows y Linux) para aumentar en 0.1
• Arriba para cambiar el valor en 1 o en 0.1 si el valor actual está entre -1 y 1
• Mayúsculas + flecha hacia arriba para aumentar en 10
• Mayúsculas + Comando + Flecha hacia arriba (Mac) o Control + Mayúsculas + Re Pág (Windows, Linux) para aumentar el valor en 100.

El decremento 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 relleno, 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 seleccionarla 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 doble punta.

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 Add New Class.
4. Presiona Intro.

Emular las preferencias de tema claro y oscuro, y habilitar 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 de 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. Activa o desactiva 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 estilo nueva, haz lo siguiente:

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

En la captura de pantalla, DevTools agrega la regla de CSS h1.devsite-page-title después de hacer clic en Nueva regla de CSS.

Elige la hoja de estilo a la que quieres agregar una regla

Cuando agregues una regla de estilo nueva, haz clic y mantén presionado Nueva regla de estilo para elegir a qué hoja de estilo agregar la regla de estilo.

Cómo 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, DevTools la tacha para indicar que ya no está activa.

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

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

Cómo alinear los elementos de la cuadrícula y su contenido con el editor de cuadrícula

Consulta la sección correspondiente en Inspect CSS grid.

Cómo cambiar colores con el selector de color

Consulta Cómo inspeccionar y depurar colores HD y no HD con el selector de color.

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

El reloj de ángulos proporciona una GUI para cambiar los <angle> en los valores de las propiedades CSS.

Para abrir el Reloj de ángulo, sigue estos pasos:

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

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

   

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

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 del reloj de ángulos 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 las 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 de CSS de 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 Outset o Inset.
   • Desplazamientos X e Y Arrastra el punto azul o especifica valores.
   • Desenfoque Arrastra el control deslizante o especifica un valor.
   • Propagación (solo para box-shadow): Arrastra el control deslizante o especifica un valor.

5. Observa los cambios aplicados al elemento.

Cómo editar 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 púrpura 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 del Editor de aceleración:

1. En el Easing Editor, 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 conmutador 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 sincronización	Ajuste predeterminado	Bézier cúbica
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)
	De entrada y salida, cúbica	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	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	En, cuadrática	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	En pulgadas cúbicas	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Dentro, atrás	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Fast Out, Linear In	cubic-bezier(0.4, 0, 1, 1)
ralentizar	Fuera, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Cuadrática de salida	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	Lineal, entrada lenta	cubic-bezier(0, 0, 0.2, 1)
	Salida y regreso	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Cómo configurar tiempos personalizados

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

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

  

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

  

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

(Experimental) Copiar cambios de CSS

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

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 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.