(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.
Última actualización el
25 abr. 2024
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.
Puedes elegir añadir 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
Selecciona Ventana > Transiciones CSS.
Haga clic en 
.
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
En el panel Transiciones CSS, seleccionar el efecto de transición que deseas editar.
Haga clic en 
.
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
Consulte¿qué es una propiedad de la forma abreviada de CSS? para obtener más información sobre la forma abreviada de CSS y sus propias ventajas.
Seleccione Edición > Preferencias.
Selecciona Estilos CSS.
En Usar forma abreviada para, anule la selección de Transición.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
