Transiciones con CSS

| Cat. CSS, JQuery>Por: Germanet

01 Definición

Las transiciones son animaciones simples, que permiten cambiar los valores de las propiedades CSS de manera gradual, proporcionando una duración. La propiedad Transition es, por tanto, el primer paso en CSS3 para lo que luego se conseguirá con la regla @keyframes, a la que dedicaremos un artículo próximamente. En este ejemplo también se ha utilizado la propiedad transform que permite que un objeto se pueda rotar, mover, inclinar, etc.

Transition (Sintaxis) Forma abreviada: las propiedades separadas por coma y los parámetros por espacio. El orden es importante.

transition: propiedad duración retraso, propiedad2 duración retraso;

Ej. transition: width 2s 1s; height 2s 1s;

Transform ( Sintaxis ) Ver lista completa de las propiedades en el enlace de referencia.

transform: propiedad (valor);

Ej. transform: rotate(15deg);

02 Componentes del ejemplo

Nota. Los valores CSS se muestran abajo, en la pestaña: Ver Código.

Banner

Es el contenedor y se ha posicionado de manera relativa, para que contenga el resto de elementos de forma absoluta, entre ellos, la imagen del fondo. Además, se le ha dado la propiedad overflow: hidden; para que todo lo que sobrepase los límites quede oculto.

Título

  • Se anima su posición de derecha (1300px) a izquierda (110px). Con la ayuda de javascript (JQuery), al cargar la página se le añade la clase "animado" que produce el cambio.
  • La propiedad transition, otorga 0.5 segundos a esta transición, que se realiza de forma lenta tanto al principio como al final (ease-in-out) y sin retraso..

Panel

  • Se desplaza hacia abajo. Al cargar la página se le añade la clase "animado", que lo coloca en su posición final. A la capa #panel, se la han dado unos valores para la transición de la posición (top) de 1.5 segundos, de forma rápida al comienzo y al final (ease) y sin retraso.

Auto

  • Se anima su posición de derecha a izquierda. Su transición, aplicada a la capa #auto es de 3 segundos y para la forma en que debe hacerlo se usa un función (cubic-bezier) que consta de 4 valores (0.31, 1.58, 0.35, 1.08), y que consigue el efecto de retroceso. Esta acción tiene un retraso es de 1 segundo, para que llegue el último..

Ruedas

  • Son elementos independientes (#rueda_1 y #rueda_2) porque además de desplazarse hacia la izquierda de la misma forma que el auto, deben girar. La posición final está condicionada por la del auto, al igual que el movimiento, y por eso deben tener los mismos valores de la función cubic-bezier (0.31, 1.58, 0.35, 1.08). También el retraso debe ser de 1 segundo.
  • Para que roten, se le aplica la propiedad transform: rotate(-1080deg); y la propiedad transform-origin, para precisar el punto exacto del eje, sobre el que debe rotar la imagen.
Fuentes / Recursos

Transición en 3schools | Función cubic-bezier | Transform | Agregar Clase en W3Scool y aguí>

Problemas

  1. Las ruedas no giraban de manera armónica, lo hacían como si estuvieran descentradas.S/ Por alguna razón, el navegador no cogía automáticamente el centro de la imagen para rotar sobre los ejes. Tuve que especificar ese centro de rotación con la propiedad transform-origin: 50% 48% 0;.
Ver Código (+/-)

JQuery




CSS

#banner {
	width: 500px;
	height:320px;
	margin: 30px auto;
	position: relative;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	perspective: 500px;
	overflow: hidden;
}

#titulo {
	position: absolute;
	left: 1300px;
	top: 10px;
}

#titulo.animado {
	left: 110px;
	 -webkit-transition: all .5s ease-in-out;
	 -moz-transition: all .5s ease-in-out;
	 -o-transition: all .5s ease-in-out;
	 transition: left .5s ease-in-out;
}

#auto {
	position: absolute;
	top: 190px;
	left: 1000px;
}

#auto.animado {
	left:100px;
	-webkit-transition: all 3s ease;
	-moz-transition: all 3s ease;
	-o-transition: all 3s ease;
	transition: all 3s /*ease*/cubic-bezier(/*.42,1.35,.47,1.29*/.31, 1.58, .35, 1.08);
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	transition-delay: 1s;
}

#panel {
	position: absolute;
	top: -1000px;
	left: 100px;
}

#panel.animado {
	top:70px;
	-webkit-transition: top 1.5s ease;
	-moz-transition: top 1.5s ease;
	-o-transition: top 1.5s ease;
	transition: top 1.5s ease;
}

#rueda_1 {
	position: absolute;
	left: 1060px;
	top: 227px;
}

#rueda_2 {
	position: absolute;
	left: 1290px;
	top: 227px;
}

.rueda {
	-webkit-transition-property: left, opacity, -webkit-transform;
	-webkit-transition-duration: 3s, 4s, 3s;
	-webkit-transition-timing-function: ease, ease, ease-out;
	-webkit-transition-delay: 1s, .5s, 1s;

	-moz-transition-property: left, opacity, -moz-transform;
	-moz-transition-duration: 3s, 4s, 3s;
	-moz-transition-timing-function: ease, ease, ease-out;
	-moz-transition-delay: 1s, .5s, 1s;

	-o-transition-property: left, opacity, -o-transform;
	-o-transition-duration: 3s, 4s, 3s;
	-o-transition-timing-function: ease, ease, ease-out;
	-o-transition-delay: 1s, .5s, 1s;

	transition-property: left, opacity, transform;
	transition-duration: 3s, 4s, 3s;
	transition-timing-function: /*ease*/cubic-bezier(/*.42,1.35,.47,1.29*/.31, 1.58, .35, 1.08), ease, /*ease-out*/ cubic-bezier(/*.42,1.35,.47,1.29*/.31, 1.58, .35, 1.08);
 	transition-delay: 1s, .5s, 1s;
}

#rueda_1.animar {
	left:158px;
}

#rueda_2.animar {
	left: 367px;
}

.rueda.animar {
	-webkit-transform: rotate(-1080deg);
	-moz-transform: rotate(-1080deg);
	-o-transform: rotate(-1080deg);
	transform: rotate(-1080deg);
	opacity: 1;
	transform-origin: 50% 48% 0;
}



postend.gif