Puede crear, modificar y eliminar transiciones CSS3 mediante el panel Transiciones CSS.

Para crear una transición CSS3, cree una clase de transición especificando los valores de las propiedades de transición del elemento. Si se selecciona un elemento antes de crear una clase de transición, la clase de transición se aplica de manera automática al elemento seleccionado.

Puede agregar el código CSS generado al documento actual o especificar un archivo CSS externo.

Creación y aplicación de un efecto de transición CSS3

  1. (Opcional) Seleccione un elemento (párrafo, encabezado, etc. ) al que desea aplicar la transición. Como alternativa, puede crear una transición y aplicarla después a un elemento.

  2. Seleccione Ventana > Transiciones CSS.

  3. Haga clic en .

  4. Cree una clase de transición mediante las opciones del cuadro de diálogo Nueva transición.

    Regla de destino

    Introduzca un nombre para el selector. El selector puede ser cualquier selector CSS, como, por ejemplo, una etiqueta, una regla, un ID o un selector de compuestos. Por ejemplo, si desea añadir los efectos de transición a todas las etiquetas <hr>, introduzca hr

    Transición con

    Seleccione el estado al que desea aplicar la transición. Por ejemplo, si desea aplicar la transición cuando el ratón pase por encima del elemento, utilice la opción hover.

    Usar la misma transición para todas las propiedades

    Seleccione esta opción si desea especificar los mismos valores de Duración, Demora y Función de temporización para todas las propiedades CSS a las que desea aplicar transición.

    Usar una transición diferente para cada propiedad

    Seleccione esta opción si desea especificar valores diferentes de Duración, Demora y Función de temporización para cada una de las propiedades CSS a las que desea aplicar transición.

    Propiedad

    Haga clic en para añadir una propiedad CSS a la que aplicar transición.

    Duración

    Introduzca una duración en segundos (s) o en milisegundos (ms) para el efecto de transición.

    Demora

    El tiempo, en segundos o milisegundos, que debe transcurrir para que se inicie el efecto de transición.

    Función de temporización

    Seleccione un estilo de transición entre las opciones disponibles.

    Valor final

    El valor final para el efecto de transición. Por ejemplo, si desea que el tamaño de fuente aumente a 40 px al final del efecto de transición, especifique 40 px para la propiedad font-size.

    Seleccione dónde debe crearse la transición

    Para incrustar el estilo en el documento actual, seleccione Sólo este documento.

    Si desea crear una hoja de estilos externa para el código CSS3, seleccione Nuevo archivo de hoja de estilos.Al hacer clic en Crear transición, se le pedirá una ubicación para guardar el nuevo archivo CSS. Una vez creada la hoja de estilos, esta se añade al menú Seleccione dónde debe crearse la transición.

Edición de efectos de transición de CSS3

  1. En el Transiciones CSS, seleccione el efecto de transición que desea editar.

  2. Haga clic en  .

  3. Utilice el cuadro de diálogo Editar transición para cambiar los valores introducidos previamente para la transición.

Desactivación de la forma abreviada de CSS para las transiciones

  1. Seleccione Edición > Preferencias.

  2. Seleccione Estilos CSS.

  3. En Usar forma abreviada para, anule la selección de Transición.


Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea