Transición CSS con múltiples propiedades

El lenguaje utilizado para diseñar una página web se llama CSS, que significa hojas de estilo en cascada. CSS explica cómo deben aparecer los componentes HTML en una pantalla, papel u otros medios.

Se ahorra mucho trabajo a través de CSS. Puede gestionar el diseño de varias páginas web simultáneamente.

En los archivos CSS, se mantienen las hojas de estilo externas.

la propiedad transición de CSS

Las transiciones CSS son la forma más rápida (y limpia) de animar sus componentes. Aprenda cómo funcionan las transiciones CSS en este tutorial y cómo usarlas para crear animaciones.

Cuando una propiedad CSS cambia de un valor a otro con el tiempo, se produce una transición. Cuatro propiedades CSS: transition-property, transition-duration, transition-timing-function y transition-delay se combinan para formar la propiedad transition.

Código de ejemplo:

.selector {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay}

También puede usar las cuatro propiedades mencionadas anteriormente en una sola declaración, como se muestra en el siguiente ejemplo de código.

.selector {
transition: property duration timing-function delay;
}

Cómo activar la transición en CSS

Las transiciones de CSS pueden activarse inmediatamente mediante el uso de pseudoclases como hover (que se activa cuando el mouse está sobre un elemento), focus (que se activa cuando un usuario hace clic en un elemento de entrada o tabula en un elemento) o active (se activa cuando el usuario hace clic en el elemento).

Activar transición con hover

La propiedad de transición se puede activar con hover, como se muestra en el siguiente ejemplo.

<!DOCTYPE html>
<html>
    <head>
        <style>
        body {
            display: flex;
            min-height: 50vh;
            justify-content: center;
            align-items: center;
        }
        .button {
            font-size: 3em;
            font-family: inherit;
            border: none;
            background-color: #33ae74;
            padding: 0.5em 0.75em;
            transition: background-color 0.5s ease-out;
        }
        .button:hover {
            background-color: lightgreen;
        }
        </style>
    </head>
    <body>
        <button class="button">Trigger Transition with hover</button>
    </body>
</html>

Producción:

Activar transición con un clic

Puede activar una transición con un clic, como se muestra en el siguiente ejemplo. Con un solo clic se activa el color transición.

Código de ejemplo:

<!DOCTYPE html>
<html>
   <head>
      <style>
      body {
      display: flex;
      min-height: 50vh;
      justify-content: center;
      align-items: center;
      }
      .button {
      font-size: 3em;
      font-family: inherit;
      border: none;
      background-color: #33ae74;
      padding: 0.5em 0.75em;
      transition: background-color 0.5s ease-out;
      }
      .button.is-active {
      background-color: lightblue;
      }
      </style>
  </head>
      <body>
          <button class="button">Trigger Transition with click</button>
      </body>
</html>

const button = document.querySelector('.button');
button.addEventListener('click', _ => button.classList.toggle('is-active'));

Producción:

Conclusión

Hay un total de cuatro propiedades de transición de CSS. Puede usar las propiedades de transición de CSS por separado y usar las cuatro propiedades en una sola declaración mencionada en el artículo anterior.