{"id":9120,"date":"2020-05-08T14:59:14","date_gmt":"2020-05-08T12:59:14","guid":{"rendered":"https:\/\/www.giusseppe.net\/blog\/?p=9120"},"modified":"2020-05-08T14:59:14","modified_gmt":"2020-05-08T12:59:14","slug":"anadiendo-movimiento-con-css","status":"publish","type":"post","link":"https:\/\/www.giusseppe.net\/blog\/archivo\/2020\/05\/08\/anadiendo-movimiento-con-css\/","title":{"rendered":"A\u00f1adiendo movimiento con CSS"},"content":{"rendered":"<p>Despu\u00e9s de la <a href=\"https:\/\/www.giusseppe.net\/blog\/archivo\/2020\/05\/07\/actualizado-el-theme-del-blog\/\">actualizaci\u00f3n del \u00abtheme\u00bb de WordPress<\/a> que realic\u00e9 ayer en el entorno de producci\u00f3n, he comenzado lo que podr\u00edamos denominar el ajuste fino.<\/p>\n<p>La verdad es que estoy fascinado con <strong>las posibilidades que tiene CSS3<\/strong>, como generar <strong>animaciones<\/strong> tan sencillamente como diciendo \u00ab<em>trasl\u00e1dete de ac\u00e1 a all\u00e1<\/em>\u00ab&#8230; m\u00e1s o menos. Es formidable y ya hab\u00eda hecho uso de ello en la <a href=\"https:\/\/laconsulta.giusseppe.net\" target=\"_blank\" rel=\"noopener noreferrer\">web del proyecto La Consulta<\/a>, especialmente en el apartado de mostrar el <a href=\"https:\/\/www.giusseppe.net\/proyectos\/laconsulta\/html\/garbanzosfoto.html\" target=\"_blank\" rel=\"noopener noreferrer\">tama\u00f1o aumentado de las im\u00e1genes de los garbanzos contados cuando se pasa el rat\u00f3n por encima<\/a>.<\/p>\n<p>Es tan tentador usarlo una vez que se conoce que <strong>puede acabar pareciendo un circo<\/strong> en el peor de los sentidos. De momento, <strong>s\u00f3lo incorporar\u00e9 alguna traslaci\u00f3n<\/strong> de \u00abcajitas\u00bb en el blog y cuando comience (<em>que ya estoy a punto<\/em>) a remodelar la web, usar\u00e9 las mismas, adem\u00e1s de intentar utilizar los mismos colores, as\u00ed que lo he a\u00f1adido a un archivo CSS llamado animaciones.css que estoy creando a partir de la fant\u00e1stica herramienta encontrada en <a href=\"https:\/\/animista.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">animista.net<\/a>.<\/p>\n<p><strong>Me habr\u00eda gustado utilizar \u00ab@import\u00bb<\/strong> en el CSS adicional dentro del tema de wordpress, pero parece que no es viable hacerlo, as\u00ed que me obliga a tener duplicadas (con lo poco que eso me gusta) esas directivas tanto en el hueco que la edici\u00f3n del tema WordPress me permite, as\u00ed como en <a href=\"https:\/\/www.giusseppe.net\/estilos\/animaciones.css\" target=\"_blank\" rel=\"noopener noreferrer\">el archivo CSS \/estilos\/animaciones.css<\/a> de la ra\u00edz de mi web.<\/p>\n<p>De momento, dejo el c\u00f3digo que ha generado esta aplicaci\u00f3n online en esta entrada, por si alguna vez vuelvo a necesitarla:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.slide-in-left {\r\n    -webkit-animation: slide-in-left 3s both;\r\n            animation: slide-in-left 3s both;}\r\n.slide-in-right {\r\n    -webkit-animation: slide-in-right 3s both;\r\n            animation: slide-in-right 3s both;\r\n}\r\n\r\n\/* ----------------------------------------------\r\n * Generated by Animista on 2020-5-8 11:22:35\r\n * Licensed under FreeBSD License.\r\n * See http:\/\/animista.net\/license for more info. \r\n * w: http:\/\/animista.net, t: @cssanimista\r\n * ---------------------------------------------- *\/\r\n\r\n\/**\r\n * ----------------------------------------\r\n * animation slide-in-left\r\n * ----------------------------------------\r\n *\/\r\n@-webkit-keyframes slide-in-left {\r\n  0% {\r\n    -webkit-transform: translateX(-1000px);\r\n            transform: translateX(-1000px);\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    -webkit-transform: translateX(0);\r\n            transform: translateX(0);\r\n    opacity: 1;\r\n  }\r\n}\r\n@keyframes slide-in-left {\r\n  0% {\r\n    -webkit-transform: translateX(-1000px);\r\n            transform: translateX(-1000px);\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    -webkit-transform: translateX(0);\r\n            transform: translateX(0);\r\n    opacity: 1;\r\n  }\r\n}\r\n\/**\r\n * ----------------------------------------\r\n * animation slide-in-right\r\n * ----------------------------------------\r\n *\/\r\n@-webkit-keyframes slide-in-right {\r\n  0% {\r\n    -webkit-transform: translateX(1000px);\r\n            transform: translateX(1000px);\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    -webkit-transform: translateX(0);\r\n            transform: translateX(0);\r\n    opacity: 1;\r\n  }\r\n}\r\n@keyframes slide-in-right {\r\n  0% {\r\n    -webkit-transform: translateX(1000px);\r\n            transform: translateX(1000px);\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    -webkit-transform: translateX(0);\r\n            transform: translateX(0);\r\n    opacity: 1;\r\n  }\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Despu\u00e9s de la actualizaci\u00f3n del \u00abtheme\u00bb de WordPress que realic\u00e9 ayer en el entorno de producci\u00f3n, he comenzado lo que podr\u00edamos denominar el ajuste fino. La verdad es que estoy fascinado con las posibilidades que tiene CSS3, como generar animaciones tan sencillamente como diciendo \u00abtrasl\u00e1dete de ac\u00e1 a all\u00e1\u00ab&#8230; m\u00e1s o menos. Es formidable y &#8230; <a title=\"A\u00f1adiendo movimiento con CSS\" class=\"read-more\" href=\"https:\/\/www.giusseppe.net\/blog\/archivo\/2020\/05\/08\/anadiendo-movimiento-con-css\/\">Read more<span class=\"screen-reader-text\">A\u00f1adiendo movimiento con CSS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69,128,110],"tags":[83,209,112,204,76,98,87,130,105,309],"class_list":["post-9120","post","type-post","status-publish","format-standard","hentry","category-confidencias","category-proyectos","category-tecnologia-opinion","tag-aida","tag-css","tag-giusseppe","tag-html","tag-informatica","tag-internet","tag-modo-de-vida","tag-proyectos-2","tag-tecnologia","tag-web"],"_links":{"self":[{"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/posts\/9120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/comments?post=9120"}],"version-history":[{"count":1,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/posts\/9120\/revisions"}],"predecessor-version":[{"id":9121,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/posts\/9120\/revisions\/9121"}],"wp:attachment":[{"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/media?parent=9120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/categories?post=9120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.giusseppe.net\/blog\/wp-json\/wp\/v2\/tags?post=9120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}