{"id":124,"date":"2012-12-03T21:20:41","date_gmt":"2012-12-03T19:20:41","guid":{"rendered":"http:\/\/heymowski.es\/mydevnotepad\/?p=124"},"modified":"2012-12-04T22:58:31","modified_gmt":"2012-12-04T20:58:31","slug":"animaciones-css-para-firefox","status":"publish","type":"post","link":"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/","title":{"rendered":"Animaciones CSS para FireFox"},"content":{"rendered":"<p>Con el siguiente ejemplo conseguimos tener elementos que aparecen al posicionar sobre ellos con el rat\u00f3n y desaparecen al quitar el rat\u00f3n.<\/p>\n<p>Empezaremos por ver el css, donde crearemos las propiedades de animaci\u00f3n de una clase llamada (at) animaci\u00f3n transparente:<\/p>\n<p><!--more--><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\r\n\/*lo que tiene que hacer al pasar\r\nsobre el elemento.*\/\r\n\r\n.at:hover{\r\n\/*Firefox*\/\r\n\/*funci\u00f3n animaci\u00f3n a la que llamamos*\/\r\n-moz-animation-name: aparece;\r\n\/*duraci\u00f3n de la misma*\/\r\n-moz-animation-duration: 1s;\r\n\/*veces que debe repetirse la animaci\u00f3n*\/\r\n-moz-animation-iteration-count: 1;\r\n\/*posici\u00f3n en la que dejamos la animaci\u00f3n, al final*\/\r\n-moz-animation-fill-mode: forwards;\r\n\/*le devolvemos su tama\u00f1o original*\/\r\n-moz-transform: scale(1,1);\r\n}\r\n\r\n\/*lo que tiene que hacer cunado no\r\nestamos sobre el elemento.*\/\r\n\r\n.at{\r\n\/*Firefox*\/\r\n\/*funci\u00f3n animaci\u00f3n a la que llamamos*\/\r\n-moz-animation-name: desaparece;\r\n\/*duraci\u00f3n de la misma*\/\r\n-moz-animation-duration: 2s;\r\n\/*veces que debe repetirse la animaci\u00f3n*\/\r\n-moz-animation-iteration-count: 1;\r\n\/*posici\u00f3n en la que dejamos la animaci\u00f3n, al final*\/\r\n-moz-animation-fill-mode: forwards;\r\n\/*aplicamos un escalado de la mitad para dar efecto de crecimiento*\/\r\n-moz-transform: scale(0.5,0.5);\r\n\/*tiempo en el que cambia de 1 a 0.5*\/\r\n-moz-transition-duration: 0.5s;\r\n}\r\n\r\n\/*Las dos funciones aparece desaparece\r\npasan al objeto de una opacidad de 0 a 1 y viceversa*\/\r\n@-moz-keyframes aparece \/*Firefox*\/\r\n{\r\nfrom {\r\nopacity:0;\r\n}\r\nto {\r\nopacity:1;\r\n}\r\n}\r\n\r\n@-moz-keyframes desaparece \/*Firefox*\/\r\n{\r\nfrom {\r\nopacity:1;\r\n}\r\nto {\r\nopacity:0;\r\n}\r\n}\r\n<\/pre>\n<p>Ahora a cada elemento que le asignemos la clase \u00abat\u00bb tendr\u00e1 la propiedad de aparecer y desaparecer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Con el siguiente ejemplo conseguimos tener elementos que aparecen al posicionar sobre ellos con el rat\u00f3n y desaparecen al quitar el rat\u00f3n. Empezaremos por ver el css, donde crearemos las propiedades de animaci\u00f3n de una clase llamada (at) animaci\u00f3n transparente:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[13,8],"tags":[],"class_list":["post-124","post","type-post","status-publish","format-standard","hentry","category-css","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Animaciones CSS para FireFox | mydevnotepad<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"jjuanh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/\"},\"author\":{\"name\":\"jjuanh\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3\"},\"headline\":\"Animaciones CSS para FireFox\",\"datePublished\":\"2012-12-03T19:20:41+00:00\",\"dateModified\":\"2012-12-04T20:58:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/\"},\"wordCount\":230,\"commentCount\":0,\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/\",\"url\":\"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/\",\"name\":\"Animaciones CSS para FireFox | mydevnotepad\",\"isPartOf\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#website\"},\"datePublished\":\"2012-12-03T19:20:41+00:00\",\"dateModified\":\"2012-12-04T20:58:31+00:00\",\"author\":{\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#website\",\"url\":\"https:\/\/heymowski.es\/mydevnotepad\/\",\"name\":\"mydevnotepad\",\"description\":\"echo &quot;Blog sobre Php y otros entretenimientos, para reforzar mi fr\u00e1gil memoria&quot;;\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heymowski.es\/mydevnotepad\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3\",\"name\":\"jjuanh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g\",\"caption\":\"jjuanh\"},\"sameAs\":[\"http:\/\/www.heymowski.es\"],\"url\":\"https:\/\/heymowski.es\/mydevnotepad\/author\/jjuanh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animaciones CSS para FireFox | mydevnotepad","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/","twitter_misc":{"Escrito por":"jjuanh","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/#article","isPartOf":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/"},"author":{"name":"jjuanh","@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3"},"headline":"Animaciones CSS para FireFox","datePublished":"2012-12-03T19:20:41+00:00","dateModified":"2012-12-04T20:58:31+00:00","mainEntityOfPage":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/"},"wordCount":230,"commentCount":0,"articleSection":["CSS","HTML"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/","url":"https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/","name":"Animaciones CSS para FireFox | mydevnotepad","isPartOf":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/#website"},"datePublished":"2012-12-03T19:20:41+00:00","dateModified":"2012-12-04T20:58:31+00:00","author":{"@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/heymowski.es\/mydevnotepad\/2012\/12\/03\/animaciones-css-para-firefox\/"]}]},{"@type":"WebSite","@id":"https:\/\/heymowski.es\/mydevnotepad\/#website","url":"https:\/\/heymowski.es\/mydevnotepad\/","name":"mydevnotepad","description":"echo &quot;Blog sobre Php y otros entretenimientos, para reforzar mi fr\u00e1gil memoria&quot;;","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heymowski.es\/mydevnotepad\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/d2129df7ef4a39b5e02c54ae9f426ea3","name":"jjuanh","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/heymowski.es\/mydevnotepad\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bf9cff5d33a0b664a36c8a2188742797ff6063e120fd22b1a15f3b45616b6707?s=96&d=mm&r=g","caption":"jjuanh"},"sameAs":["http:\/\/www.heymowski.es"],"url":"https:\/\/heymowski.es\/mydevnotepad\/author\/jjuanh\/"}]}},"_links":{"self":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":19,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/posts\/124\/revisions\/135"}],"wp:attachment":[{"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heymowski.es\/mydevnotepad\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}