Transiciones con CSS
Por: el 23/enero/2016 Cat. Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 CSS, JQuery
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
- 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;
}
