Las transiciones con CSS3

1. Las transiciones

Para activar una transición, es necesario que se detecte un evento con, por ejemplo, una pseudo-clase: :hover, :active o :focus.

Deberá indicar qué parámetros desea utilizar con la propiedad transition-property.

A continuación, deberá indicar la duración de la transición con la propiedad transition-duration. 

2. Las propiedades CSS

Esta es la lista de propiedades CSS disponibles en el módulo Transition:

La propiedad transition-property admite además dos palabras clave predefinidas:

1. Objetivo

Vamos a realizar una transición muy sencilla: una imagen que se desplace horizontalmente.

2. El código necesario

Tenemos una imagen dentro de una caja <div>:

<div id="desplazamiento"><img src="leon.jpg" alt="León" /></div> 

Vemos que se ha creado un selector de identificación para esa caja <div>. Ahora vamos a posicionar ese elemento:

#desplazamiento{ 
    position: absolute; 
    left: 20px; 
    top: 20px; 
} 

3. Las propiedades de la transición

Con la propiedad transition-property vamos a indicar cuál es la propiedad CSS que queremos modificar: transition-property: left;.

Con la propiedad transition-duration vamos a indicar la duración de la transición: transition-duration: 2s;. Las unidades que se pueden usar son los segundos s y los milisegundos ms.

Tendremos el siguiente selector:

#desplazamiento { 
   position: absolute; 
   left: 20px
   top: 20px; 
   transition-property: left;
   transition-duration: 2s; 
} 

Ahora, para terminar, vamos a indicar el nuevo valor de la propiedad left y el evento que va a provocar la transición.

En nuestro ejemplo, será al pasar el cursor por encima (:hover) cuando...

1. El movimiento

La propiedad transition-timing-function permite definir el movimiento de la transición. Esta admite seis valores representados con palabras clave:

Estas son las curvas de Bézier utilizadas para esos efectos cinéticos:

Fuente de los gráficos (blog francés): https://fglt.fr/css/les-transitions-css3/

Esta es la sintaxis que vamos a usar:

#desplazamiento { 
   position: absolute; 
   left: 20px; 
   top: 20px; 
   transition-property: left; 
   transition-duration: 2s; 
   transition-timing-function: ease-in; 
} 

2. El inicio de la transición

La propiedad transition-delay permite definir cuándo...

1. Objetivo

Vamos a crear un menú muy sencillo, con dos transiciones que van a intervenir cuando se pase el ratón sobre los vínculos:

2. El diseño del formulario

Cree un menú de navegación con una lista <ul>.

<ul id="menu"> 
    <li><a href="#">Inicio</a></li> 
    <li><a href="#">Referencias</a></li> 
    <li><a href="#">Contacto</a></li> 
</ul> 

Cree los estilos CSS para aplicarle un diseño a su menú:

#menu li { 
    list-style: none; 
} 
#menu a { 
    display: block; 
    float: left; 
    width: 100px; 
    padding: 3px; 
    margin-right: 20px; 
    border: 1px solid #333; 
    background-color: lightyellow; 
    text-align: center; 
    color: black; 
    text-decoration: none;
} 

El fondo de los vínculos...

1. Objetivo

Vamos a crear un diaporama muy sencillo, para que podamos aplicarle transformaciones y transiciones. Las imágenes se visualizarán con una transformación de cambio de escala, para mostrarlas con un tamaño más pequeño. Cuando pasemos el cursor con el ratón, la imagen se ampliará y se desplazará hacia la izquierda con una transición.

2. La estructura del diaporama

Vamos a usar una estructura 100% HTML5, con los elementos section, figure y figcaption :

<section id="diaporama"> 
    <figure> 
        <img src="foto1.jpg" /> 
        <figcaption>Hipopótamo</figcaption> 
    </figure> 
    <figure> 
        <img src="foto2.jpg" /> 
        <figcaption>Tigre</figcaption> 
    </figure> 
        <img src="foto3.jpg" /> 
        <figcaption>Cebra</figcaption> 
    </figure> 
    <figure> 
        <img...

1. Objetivo

Vamos a crear un menú de navegación "con cajones". Los "cajones" son cajas <div> que aparecerán progresivamente cuando se pase el cursor sobre un elemento del menú.

Este ejemplo ha sido creado a partir del sitio web CSS3CREATE (en francés):   http://www.css3create.com/Menu-avec-slider-effet-transition

2. La estructura del menú de navegación

El menú de navegación se encuentra dentro de un elemento section con un ID, en una lista ul. Cada etiqueta del menú se encuentra insertada en un elemento li de la lista, en un vínculo a.

<section id="menu"> 
<ul> 
    <li> 
        <a href="#" class="enlace">Manzanas</a> 
    </li> 
    <li> 
        <a href="#" class="enlace">Peras</a> 
    </li> 
    <li> 
        <a href="#" class="enlace">Plátanos</a> 
    </li> 
    <li> 
        <a href="#" class="enlace">Fresas</a> 
    </li> 
</ul> 
</section> 

Las cajas <div> de los cajones se encuentran dentro de los elementos li. En el ejemplo, estas cajas <div> presentan un elemento de encabezado h3 y un párrafo p.

<section id="menu"> 
<ul> 
    <li> 
        <a href="#" class="enlace">Manzanas</a> 
        <div> 
            <h3>Las...

1. Objetivo

Vamos a crear un elemento de interfaz de tipo "acordeón". Este método permite insertar una gran cantidad de texto en una zona de visualización que el usuario podrá abrir haciendo clic en el título de dicha zona. Se trata de un elemento habitual (accordion) que podemos encontrar en multitud de frameworks JavaScript.

El siguiente ejemplo está inspirado en gran medida en el que propone el sitio web: https://www.paulrhayes.com/accordion-using-only-css/

2. La estructura del "acordeón"

El elemento de tipo "acordeón" se encuentra dentro de una caja <div> con un ID. Cada una de sus zonas de visualización se encuentra también dentro de una caja <div> con un ID y utiliza una clase común. El título de cada zona es un encabezado h3. El texto se encuentra dentro de un párrafo p que utiliza una clase común y que se ha insertado dentro de una caja <div>.

<div id="accordion"> 
    <div id="uno" class="section"> 
        <h3><a href="#uno">Commodo augue</a></h3> 
        <div> 
            <p class="texto">Commodo...