Transiciones (funciones de transición)
Bordes redondeados (border-radius) Bordes redondeados en los vértices Sombras (box-shadow) Sombras múltiples (box-shadow) Sombras interiores Sombras con transparencias Sombras de texto Rotación Punto de origen Escalado Translación Torcer (transform:skew) Múltiples transformaciones en forma simultanea Opacidad (opacity) Opacidad (color) Múltiples columnas (column-count) Múltiples columnas dinámicas (column-width) Múltiples columnas y su separación (column-gap) Múltiples columnas y línea separadora (column-rule) Importar una fuente no disponible en el navegador (@font-face) Imágenes de fondo (background-image) Imágenes de fondo en diferentes posiciones (background-position) Imágenes de fondo (background-size) Imágenes de fondo (background-origin) Transiciones de una propiedad (transition) Transiciones de múltiples propiedades (transition) Transiciones (funciones de transición) Transiciones (tiempo de demora en iniciar la transición) Transiciones (otra sintaxis para hacer lo mismo) Animaciones (sintaxis básica) Animaciones (animation-iteration-count y animation-direction) Animaciones (animation-timing-function y animation-delay) Animaciones (animation-play-state) Animaciones (definición de más de 2 keyframes)

Transiciones (funciones de transición)

Hemos visto que la propiedad transition podemos indicarle hasta cuatro parámetros. Los dos primeros son obligatorios y los otros son opcionales.


CSS3 dispone de otras cuatro funciones para indicar cada uno de estos valores en forma independiente:>

  • transition-property La propiedad transition-property es el nombre de la propiedad CSS para la que es el efecto de transición (el efecto de transición se iniciará cuando cambie la propiedad CSS especificada).
  • transition-duration La propiedad de CSS transition-duration establece el tiempo que debe tardar una animación de transición en completarse. Por defecto, el valor es de 0s, esto quiere decir que no se producirá ninguna animación.
  • transition-timing-function La propiedad transition-timing-function CSS establece cómo se calculan los valores intermedios para las propiedades CSS afectadas por un efecto de transición .
  • transition-delay La propiedad CSS transition-delay especifica la cantidad de tiempo a esperar entre un cambio pedido hacia una propiedad y el comienzo de un efecto de transicion (transition effect).

Sugerencia: Un efecto de transición puede ocurrir normalmente cuando un usuario pasa el cursor sobre un elemento.

Nota: especifique siempre la propiedad de duración de la transición; de lo contrario, la duración es 0 y la transición no tendrá ningún efecto.

Propiedad transition-property

Sintaxis
transition-property: none|all|property|initial|inherit;

Opciones

  • none Ninguna propiedad obtendrá un efecto de transición
  • all Valor por defecto. Todas las propiedades obtendrán un efecto de transición.
  • property Define una lista separada por comas de nombres de propiedades CSS para las que se aplica el efecto de transición
  • initial Establece esta propiedad en su valor predeterminado.
  • inherit Hereda esta propiedad de su elemento padre.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width, height, background;
  transition-duration: 2s;
}
div:hover {
  width: 300px;
  height: 300px;
background: blue;
}

</style>

</head>
<body><p><b>Note:</b> Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores.</p>
<div></div>
<p>Coloca el cursor sobre el elemento div de arriba para ver el efecto de transición.</p>
</body>
</html>

Nota: Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores.

Coloca el cursor sobre el elemento div de arriba para ver el efecto de transición.

Propiedad transition-duration

Sintaxis
transition-duration: time|initial|inherit

Opciones

  • time Especifica cuántos segundos o milisegundos tarda en completarse un efecto de transición. El valor predeterminado es 0, lo que significa que no habrá efecto
  • initial Establece esta propiedad en su valor predeterminado.
  • inherit Hereda esta propiedad de su elemento padre.
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: green;
  transition-property: background;
  transition-duration: 5s;
}
div:hover {background: yellow;
}

</style>

</head>
<body><p><b>Nota:</b> Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores.</p>
<div></div>
<p>Coloca el cursor sobre el elemento div de arriba para ver el efecto de transición.</p>
</body>
</html>

Nota: Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores.

Coloca el cursor sobre el elemento div de arriba para ver el efecto de transición.

Propiedad transition-timing-function (opcional)

Sintaxis
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|initial|inherit;
Opciones
  • ease Valor por defecto. Especifica un efecto de transición con un inicio lento, luego rápido y luego un final lento (equivalente a cubic-bezier(0.25,0.1,0.25,1))
  • linear Especifica un efecto de transición con la misma velocidad de principio a fin (equivalente a cubic-bezier(0,0,1,1))
  • ease-in Especifica un efecto de transición con un inicio lento (equivalente a cubic-bezier(0.42,0,1,1))
  • ease-out Especifica un efecto de transición con un final lento (equivalente a cubic-bezier(0,0,0.58,1))
  • ease-in-out Especifica un efecto de transición con un inicio y un final lentos (equivalente a cubic-bezier(0.42,0,0.58,1))
  • cubic-bezier(n,n,n,n) Defina sus propios valores en la función cubic-bezier. Los valores posibles son valores numéricos de 0 a 1
  • initial Establece esta propiedad en su valor predeterminado
  • inherit Hereda esta propiedad de su elemento padre.
<!DOCTYPE html>
<html>
<head>

<style>
#div1 , #div2 , #div3, #div4, #div5 {
  width: 100px;
  height: 50px;
  background: red;
  color: white;
  font-weight: bold;
  transition: width 2s;
  transition-property: width,  background;
  transition-duration: 2s;
 }

#div1 {
transition-timing-function: linear;
}
#div2 {
transition-timing-function: ease;
}
#div3 {
transition-timing-function: ease-in;
}

#div4 {
transition-timing-function: ease-out;
}

#div5 {transition-timing-function: ease-in-out;}

#div1:hover {
  width: 300px;
  background: yellow;
}

#div2:hover {
  width: 300px;
  background: green;
}

#div3:hover {
  width: 300px;
  background: blue;
}

#div4:hover {
  width: 300px;
  background: cyan;
}

#div5:hover {
  width: 300px;
  background: magenta;
}
</style>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>


</body>
</html>
linear

ease

ease-in

ease-out

ease-in-out

Coloca el cursor sobre los elementos div de arriba para ver los diferentes efectos de transición.

Propiedad transition-delay

Sintaxis
transition-delay: time|initial|inherit

Opciones

  • time Especifica cuántos segundos o milisegundos tarda en completarse un efecto de transición. El valor predeterminado es 0, lo que significa que no habrá efecto
  • initial Establece esta propiedad en su valor predeterminado.
  • inherit Hereda esta propiedad de su elemento padre.
<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: background;
  transition-duration: 5s;
  transition-delay: 2s;
}
div:hover {background: yellow;
}

</style>

</head>
<body><p><b>Nota:</b> Este ejemplo no funciona en Internet Explorer 9 y versiones anteriores.</p>
<div></div>
<p>Desplácese sobre el elemento div a continuación para ver el efecto de transición (tenga en cuenta que el efecto de transición esperará 2 segundos antes de comenzar):</p>
</body>
</html>

Desplácese sobre el elemento div a continuación para ver el efecto de transición (tenga en cuenta que el efecto de transición esperará 2 segundos antes de comenzar):

Note: This example does not work in Internet Explorer 9 and earlier versions.