Después de la actualización del «theme» de WordPress que realicé ayer en el entorno de producción, he comenzado lo que podríamos denominar el ajuste fino.
La verdad es que estoy fascinado con las posibilidades que tiene CSS3, como generar animaciones tan sencillamente como diciendo «trasládete de acá a allá«… más o menos. Es formidable y ya había hecho uso de ello en la web del proyecto La Consulta, especialmente en el apartado de mostrar el tamaño aumentado de las imágenes de los garbanzos contados cuando se pasa el ratón por encima.
Es tan tentador usarlo una vez que se conoce que puede acabar pareciendo un circo en el peor de los sentidos. De momento, sólo incorporaré alguna traslación de «cajitas» en el blog y cuando comience (que ya estoy a punto) a remodelar la web, usaré las mismas, además de intentar utilizar los mismos colores, así que lo he añadido a un archivo CSS llamado animaciones.css que estoy creando a partir de la fantástica herramienta encontrada en animista.net.
Me habría gustado utilizar «@import» en el CSS adicional dentro del tema de wordpress, pero parece que no es viable hacerlo, así que me obliga a tener duplicadas (con lo poco que eso me gusta) esas directivas tanto en el hueco que la edición del tema WordPress me permite, así como en el archivo CSS /estilos/animaciones.css de la raíz de mi web.
De momento, dejo el código que ha generado esta aplicación online en esta entrada, por si alguna vez vuelvo a necesitarla:
.slide-in-left {
-webkit-animation: slide-in-left 3s both;
animation: slide-in-left 3s both;}
.slide-in-right {
-webkit-animation: slide-in-right 3s both;
animation: slide-in-right 3s both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-5-8 11:22:35
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation slide-in-right
* ----------------------------------------
*/
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}