Transiciones

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript admiten transiciones de Hojas de estilo CSS de nivel 3 (CSS3). Las transiciones cambian sin dificultad los valores de propiedad de las hojas de estilo en cascada (CSS) durante un tiempo especificado para que puedas crear animaciones simples. Por ejemplo, podrías variar el tamaño y el color de un objeto durante un período de 10 segundos. Lo que antes podías lograr mediante una complicada combinación de CSS y JavaScript, ahora lo puedes hacer solo con CSS. El World Wide Web Consortium (W3C) define las transiciones CSS3 en la especificación del módulo de transiciones CSS de nivel 3, que en estos momentos está en la fase de borrador de trabajo.

Nota  Antes, las propiedades y el evento descritos en este tema requerían un prefijo de proveedor específico de Microsoft, "-ms-", para funcionar con Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript. Este prefijo ya no es necesario pero aún se reconoce. Para garantizar la compatibilidad en el futuro, las aplicaciones que usan el prefijo de proveedor de Microsoft con propiedades de transición deben actualizarse como corresponda.

Este tema proporciona información general de las propiedades que conforman las transiciones CSS3 y te muestra un ejemplo simple de las transiciones en uso.

Para ver una lista de propiedades CSS en la que puedes aplicar transiciones, consulta las propiedades de animación y transición.

La propiedad transition-property

La propiedad transition-property se usa para identificar una o varias propiedades CSS en las que se aplicarán los efectos de la transición cuando se especifique un nuevo valor de propiedad.

PropiedadDescripción

transition-property

Indica el nombre o los nombres de las propiedades CSS en las que se aplicará el efecto de la transición cuando se especifique un nuevo valor de propiedad. La propiedad transition-property se puede establecer en una lista separada por comas de propiedades CSS o en uno de los siguientes valores:

  • none  No se aplica ningún efecto de la transición cuando se especifica un nuevo valor de propiedad. Se ignoran todas las propiedades de la transición.
  • all  Este es el valor predeterminado. Los efectos de la transición se aplican en todas las propiedades que admiten transiciones cuando se especifica un nuevo valor para la propiedad.

 

Además de aplicar transiciones a propiedades CSS más básicas como posicionamiento, color, fuentes, etc., puedes aplicar transiciones a propiedades CSS admitidas recientemente como opacity y border-radius, y transformaciones 2D y 3D.

Ten en cuenta que, cuando interrumpes una transición, se revierte automáticamente.

La propiedad transition-duration

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

PropiedadDescripción

transition-duration

Especifica uno o más valores de tiempo separados por comas; estos indican el tiempo que tarda en realizarse una transición del valor antiguo al valor nuevo. Cada valor lleva el formato de un número de punto flotante seguido de un designador de unidad de tiempo (ms o s).

 

La propiedad transition-timing-function

La propiedad transition-timing-function describe cómo se calcularán los valores intermedios que se usan durante una transición para que esta cambie de velocidad a lo largo de su duración. Para ello, debes especificar una función de temporización de animación basada en una curva de Bézier cúbica, que usa cuatro parámetros.

Para especificar la curva de manera explícita, puedes usar la función cubic-bezier y escribir los cuatro valores manualmente. También puedes elegir entre distintas palabras claves de funciones, cada una de las cuales se corresponde con una función de temporización de uso frecuente.

PropiedadDescripción

transition-timing-function

Especifica una o más funciones de temporización separadas por comas que definen los valores de propiedad intermedios usados durante una transición en un conjunto de propiedades de objeto correspondientes. Los valores posibles pueden ser cualquiera de los siguientes. Consulta al página de referencia de transition-timing-function para obtener la descripción de cada función.

  • cubic-bezier(x1,y1,x2,y2)  Los cuatro parámetros de esta función deben ser valores de punto flotante comprendidos entre 0 y 1, ambos incluidos. Los valores corresponden a las coordenadas x e y de los puntos P1 y P2 de la curva de Bézier cúbica. Para propiedades que no sean opacity y color, la función de curva cubic-bezier acepta las coordenadas y fuera del intervalo estándar comprendido entre 0 y 1. Esto te permitirá crear efectos de transición "elásticos" o de "rebote".
  • ease  Este es el valor predeterminado. Esta función de temporización aumenta gradualmente la velocidad al principio, anima a toda velocidad y, gradualmente, disminuye la velocidad hacia el final.
  • linear  Esta función de temporización mantiene la misma velocidad de principio a fin.
  • ease-in  Esta función de temporización aumenta gradualmente la velocidad al principio.
  • ease-out  Esta función de temporización disminuye gradualmente la velocidad al final.
  • ease-in-out  Esta función de temporización aumenta gradualmente la velocidad al principio y, gradualmente, disminuye la velocidad hacia el final.
  • steps  Esta función de temporización define un ritmo escalonado y requiere dos parámetros. El primer parámetro determina la cantidad de intervalos y el segundo parámetro opcional determina el punto en el intervalo donde cambia el valor de la propiedad. El segundo parámetro está limitado al valor de principio o fin, que es el predeterminado.

 

La propiedad transition-delay

La propiedad transition-delay permite retrasar el comienzo de una transición, o hacer que parezca que la transición ya está en curso. Si el valor de la propiedad transition-delay es un valor negativo, la transición se ejecutará en cuanto se aplique, pero parecerá que su ejecución comenzó en el desplazamiento especificado o durante su ciclo de reproducción.

PropiedadDescripción

transition-delay

Especifica uno o más valores de desplazamiento separados por comas en una transición (el período de tiempo desde el inicio de una transición) antes de que la misma se muestre para un conjunto de propiedades de objeto correspondientes. Cada valor lleva el formato de un número de punto flotante seguido de un designador de unidad de tiempo (ms o s).

 

La propiedad transition

La propiedad abreviada transition combina en una sola propiedad las cuatro propiedades de transición descritas anteriormente.

PropiedadDescripción

transition

Especifica uno o más conjuntos de propiedades de transición delimitadas por espacios para un conjunto de propiedades de objeto correspondientes. Los valores de las propiedades de transición deben enviarse en el siguiente orden:

Si tienes más de un conjunto de cuatro valores de propiedades de transición, debes separarlos mediante una coma.

 

Ejemplo

Puedes ver transiciones CSS3 en acción en Práctica: transiciones en la Versión de prueba de IE.

El siguiente ejemplo muestra cómo usar las transiciones CSS3 para modificar una propiedad CSS aplicada a un elemento div con el tiempo.

Primero, crearemos un elemento div que tenga algo de texto y le aplicaremos estilos:


<!DOCTYPE html>
<html lang="en-us">

<head>
<style type="text/css">
body {
  padding: 10px;
  font: bold 20pt "Segoe UI";
}
div {
  width: 250px;
  background-color: lime;
  padding: 10px;
}
</style>
</head>

<body>

<div>
  Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor.
  Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.</div>

</body>

</html>


Visualiza esta página.

Para hacer que div desaparezca lentamente con el tiempo, se debe cambiar la propiedad opacity cuando el usuario hace clic y mantiene presionado (o toca y mantiene presionado) div. Primero, se establecerán los valores "antes" y "después" para la propiedad de opacidad. Le daremos a div una opacidad de "1" para comenzar y una de "0" cuando div está "activo". Para lograrlo, se agregarán propiedades de opacidad para que la sección de estilo aparezca como se muestra aquí:


...
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI"; 
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
  opacity:1;
}
div:active {
  opacity:0;
}
</style>
...


Después, cuando hagas clic y mantengas presionado (o presiones y mantengas presionado) el div verde, este desaparecerá inmediatamente mientras hagas clic con el mouse (o mantengas presionado tu dedo). Visualiza esta página.

Ahora es posible agregar las propiedades de transición CSS para que la opacidad disminuya gradualmente. En primer lugar, identificamos la propiedad que va a realizar la transición con la propiedad transition-property:


transition-property: opacity;

A continuación, agregamos la duración de la transición con la propiedad transition-duration:


transition-duration: 5s;

Ahora, definimos la función de temporización que se usará con la propiedad transition-timing-function. Para que la transición de div sea uniforme, se usará la función de temporización lineal:


transition-timing-function: linear;

También podemos retrasar la transición durante un segundo con la propiedad transition-delay:


transition-delay: 1s;

Estas cuatro propiedades provocarán que la propiedad opacity realice una transición de manera uniforme durante 5 segundos después de 1 segundo. También puedes usar la propiedad abreviada de transición para combinar las cuatro propiedades:


transition: opacity 5s linear 1s;

Visualiza esta página.

Para realizar la transición de una propiedad de un elemento, establece las propiedades de transición en diversos valores, separados por comas. Por ejemplo, se puede agregar un cambio de color al ejemplo anterior. Primero, agrega una propiedad background-color al selector div :active. Después cambia la propiedad transition de la siguiente manera:


transition: opacity 5s linear 1s, background-color 2s ease;

Esta propiedad agrega una transición de color a púrpura durante dos segundos con la función de temporización fácil. Como no hay un valor de retraso, la transición comienza de inmediato. Visualiza esta página.

Transición de eventos DOM

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript definen dos eventos de transición:

transitionstart

El evento transitionstart se produce al comienzo de la transición.

transitionend

El evento transitionend se produce cuando finaliza la transición. Si la transición se elimina antes de completarse, no se activará el evento

En este ejemplo se aplican transiciones a un elemento <div> y se activan los eventos transitionstart y transitionend para cambiar el texto del cuadro. Prueba el ejemplo disponible en línea.


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>


Referencia de API

Transitions

Ejemplos y tutoriales

Cómo hacer que tu página web cobre vida con transformaciones, transiciones y animaciones CSS

Demostraciones de la versión de prueba de Internet Explorer

Hands On: Transitions
Transformaciones 3D de CSS3 en IE10
Conseguir que las páginas cobren vida con animaciones y transformaciones CSS

Publicaciones de IEBlog

Animaciones de página completa con CSS
Agregar personalidad con animaciones y transiciones CSS3

Especificación

Transiciones CSS

Temas relacionados

Aplicaciones vistosas con transiciones CSS3

 

 

Mostrar:
© 2014 Microsoft