Transiciones

4.1 Propiedad transition

Las transiciones CSS (transition) permiten animar los cambios de valores de propiedades CSS, creando transiciones suaves entre sus estados inicial y final. Es una herramienta poderosa que mejora la experiencia de usuario al añadir dinamismo a las páginas web. Veamos los aspectos principales de las transiciones, incluyendo propiedades, duración y funciones de timing.

La propiedad transition combina todos los aspectos de una transición en una sola propiedad. Puede incluir:

1. Propiedades que se animarán.
2. Duración de la animación.
3. Función de timing.
4. Retraso antes de empezar la animación (opcional).

Sintaxis:

    
      element {
        transition: property duration timing-function delay;
      }
    
  

Donde:

• property: propiedad a la que se aplica la transición (por ejemplo, width, height, background-color)
• duration: duración de la transición (por ejemplo, 2s para dos segundos o 500ms para 500 milisegundos)
• timing-function: función de timing que define la velocidad del cambio de animación (por ejemplo, ease, linear, ease-in, ease-out, ease-in-out)
• delay: retraso antes de comenzar la transición (por ejemplo, 1s para un segundo)

Ejemplo:

    
      
Content
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

Explicación del código:

• transition: width 2s ease-in-out, background-color 1s ease: define dos transiciones: una para la propiedad width con duración de 2 segundos y función de timing ease-in-out, y otra para la propiedad background-color con duración de 1 segundo y función de timing ease

4.2 Propiedades de transición

1. Propiedad transition-property

La propiedad transition-property define a qué propiedades del elemento se aplicarán las transiciones.

Sintaxis:

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Ejemplo:

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. Propiedad transition-duration

La propiedad transition-duration establece la duración de la transición.

Sintaxis:

    
      element {
        transition-duration: time;
      }
    
  

Ejemplo:

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. Propiedad transition-timing-function

La propiedad transition-timing-function define la velocidad del cambio de animación con el tiempo.

Sintaxis:

    
      element {
        transition-timing-function: function;
      }
    
  

Ejemplo:

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. Propiedad transition-delay

La propiedad transition-delay establece un retraso antes de que comience la transición.

Sintaxis:

    
      element {
        transition-delay: time;
      }
    
  

Ejemplo:

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Duración de las transiciones

La duración de la transición determina cuánto tiempo durará la animación del cambio de propiedad. Se establece en segundos (s) o milisegundos (ms).

Ejemplo:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

Explicación del código:

• transition: width 2s, height 1s, background-color 500ms: define que la transición para la propiedad width durará 2 segundos, para height — 1 segundo, y para background-color — 500 milisegundos.

4.4 Funciones de timing

Las funciones de timing determinan cómo el valor de la propiedad cambia con el tiempo. Permiten crear varios efectos de animación.

Principales funciones de timing:

• ease: la animación comienza lentamente, acelera hacia el medio y ralentiza hacia el final
• linear: la animación ocurre a una velocidad constante desde el inicio hasta el final
• ease-in: la animación comienza lento y luego acelera
• ease-out: la animación comienza rápido y luego reduce la velocidad
• ease-in-out: la animación comienza y termina lentamente, acelerando en el medio

Ejemplo:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

Explicación del código:

• ease-in-out: transición suave, comenzando y terminando lentamente
• linear: transición a velocidad constante
• ease: transición con comienzo y final lentos, acelerando hacia el medio