Las transiciones en CSS3

Desplazamiento

Vamos a realizar una transición sencilla de una imagen desplazándose.

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

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

La propiedad transition-timing-function permite definir el movimiento de la transición. Esta admite seis valores representador por palabras clave: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier.

La propiedad transition-delay permite definir cuándo se iniciará la transición, cuánto tiempo después de la detección del evento.

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

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

	#desplazamiento:hover { 
		left: 150px; 
	}
Logo

Transiciones múltiples

También es posible aplicar varias transiciones. Simplemente se debe separar cada transición con una coma e indicar el plazo para que cada transición comience en el momento oportuno.

Vamos a crear una transición múltiple con tres propiedades modificadas:

  • el ancho width, que dura 3 segundos.
  • desplazamiento hacia la derecha left, que dura 2 segundos y comienza 3 segundos más tarde.
  • la opacidad opacity, que dura 4 segundos y comienza 6 segundos más tarde.
	#multiple { 
		position: relative; 
		left: 20px; 
		top: 20px; 
		width: 96px; 
		height: 96px; 
		-webkit-transition: width 3s linear, height 2s linear 3s, 
		opacity 4s linear 6s; 
		-o-transition: width 3s linear, height 2s linear 3s, 
		opacity 4s linear 6s; 
		transition: width 3s linear, left 2s linear 3s, 
		opacity 4s linear 6s; 
	} 

	#multiple:hover { 
		width: 350px; 
		height: 120px; 
		opacity: .3;
		left: 100px;
	}

	#multiple img{
		width:100%;
	}
Logo