Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719

Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719
{"id":610,"date":"2016-01-23T19:10:33","date_gmt":"2016-01-23T17:10:33","guid":{"rendered":"https:\/\/www.pcpolis.es\/blog\/?p=610"},"modified":"2016-01-29T14:19:06","modified_gmt":"2016-01-29T12:19:06","slug":"animar-con-css","status":"publish","type":"post","link":"https:\/\/www.pcpolis.es\/blog\/css\/animar-con-css\/","title":{"rendered":"Transiciones con CSS"},"content":{"rendered":"<div id=\"banner\">\n<div><noscript><\/p>\n<h2>Debe activar Javascript en su Navegador para ver correctamente este ejemplo.<\/h2>\n<p><\/noscript>\n<\/div>\n<div id=\"fondo\" style=\"text-align: center;\"><img loading=\"lazy\" src=\"https:\/\/www.pcpolis.es\/blog\/imagenes\/css\/animar_fondo.jpg\" alt=\"fondo\" width=\"500\" height=\"320\" \/><\/div>\n<div id=\"titulo\"><img loading=\"lazy\" src=\"https:\/\/www.pcpolis.es\/blog\/imagenes\/css\/css_animar_03.png\" alt=\"anim_css3\" width=\"240\" height=\"53\" \/><\/div>\n<div id=\"panel\"><img loading=\"lazy\" src=\"https:\/\/www.pcpolis.es\/blog\/imagenes\/css\/css_animar_09.png\" alt=\"panel\" width=\"315\" height=\"175\" \/><\/div>\n<div id=\"auto\"><img loading=\"lazy\" src=\"https:\/\/www.pcpolis.es\/blog\/imagenes\/css\/css_animar_09.gif\" alt=\"auto\" width=\"370\" height=\"94\" \/><\/div>\n<div id=\"rueda_1\" class=\"rueda\"><img loading=\"lazy\" src=\"https:\/\/www.pcpolis.es\/blog\/imagenes\/css\/whell-1.png\" alt=\"rueda1\" width=\"54\" height=\"55\" \/><\/div>\n<div id=\"rueda_2\" class=\"rueda\"><img loading=\"lazy\" src=\"https:\/\/www.pcpolis.es\/blog\/imagenes\/css\/wheel-2.png\" alt=\"rueda2\" width=\"56\" height=\"56\" \/><\/div>\n<\/div>\n<div align=\"center\"><input id=\"boton\" onclick=\"javascript:repetir();\" type=\"button\" value=\"Repetir\" \/><\/div>\n<h2>01 Definici\u00f3n<\/h2>\n<p>Las transiciones son animaciones simples, que permiten cambiar los valores de las propiedades CSS de manera gradual, proporcionando una duraci\u00f3n. La propiedad <strong>Transition<\/strong> es, por tanto, el primer paso en CSS3 para lo que luego se conseguir\u00e1 con la regla @keyframes, a la que dedicaremos un art\u00edculo pr\u00f3ximamente. En este ejemplo tambi\u00e9n se ha utilizado la propiedad <strong>transform<\/strong> que permite que un objeto se pueda rotar, mover, inclinar, etc.<\/p>\n<p><strong>Transition<\/strong> (Sintaxis) Forma abreviada: las propiedades separadas por coma y los par\u00e1metros por espacio. El orden  es importante.<\/p>\n<div class=\"codigo margen30\">\n<p>\ttransition<strong>:<\/strong> propiedad duraci\u00f3n retraso, propiedad2 duraci\u00f3n retraso;<\/p>\n<p><strong>Ej. transition: width 2s 1s; height 2s 1s;<\/strong><\/p>\n<\/div>\n<p><strong>Transform<\/strong> ( Sintaxis ) Ver lista completa de las propiedades en el enlace de referencia. <\/p>\n<div class=\"codigo margen30\">\n<p>transform: propiedad (valor);<\/p>\n<p><strong>Ej. transform: rotate(15deg);\t<\/strong><\/p>\n<\/div>\n<h2>02 Componentes del ejemplo<\/h2>\n<div>\n<p class=\"notas\"><strong>Nota<\/strong>. Los valores CSS  se muestran abajo, en la pesta\u00f1a: Ver C\u00f3digo.<\/p>\n<h3>Banner<\/h3>\n<p>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\u00e1s, se le ha dado la propiedad  overflow: hidden; para que todo lo que sobrepase los l\u00edmites quede oculto.<\/p>\n<h3>T\u00edtulo<\/h3>\n<ul class=\"lista1\">\n<li>Se anima su posici\u00f3n de derecha (1300px) a izquierda  (110px). Con la ayuda de javascript (JQuery), al cargar la p\u00e1gina se le a\u00f1ade  la clase &quot;animado&quot; que produce el cambio.<\/li>\n<li>La propiedad<strong> transition<\/strong>, otorga 0.5 segundos a esta transici\u00f3n, que se realiza de forma lenta tanto al principio como al final (<strong>ease-in-out<\/strong>) y sin retraso..<\/li>\n<\/ul>\n<h3>Panel<\/h3>\n<ul class=\"lista1\">\n<li>Se desplaza hacia abajo. Al cargar la p\u00e1gina se le a\u00f1ade la clase &quot;animado&quot;, que lo coloca en su posici\u00f3n final. A la capa #panel, se la han dado unos valores para la transici\u00f3n de la posici\u00f3n (top) de 1.5 segundos, de forma r\u00e1pida al comienzo y al final (ease) y sin retraso.<\/li>\n<\/ul>\n<h3>Auto<\/h3>\n<ul class=\"lista1\">\n<li>Se anima su posici\u00f3n de derecha a izquierda. Su transici\u00f3n, aplicada a la capa #auto es de 3 segundos y para la forma en que debe hacerlo se usa un funci\u00f3n (cubic-bezier) que consta de 4 valores (0.31, 1.58, 0.35, 1.08), y que consigue el efecto de retroceso. Esta acci\u00f3n tiene un retraso es de 1 segundo, para que llegue el \u00faltimo..<\/li>\n<\/ul>\n<h3>Ruedas<\/h3>\n<ul class=\"lista1\">\n<li>Son elementos independientes (#rueda_1 y #rueda_2) porque adem\u00e1s de desplazarse hacia la izquierda de la misma forma que el auto, deben girar. La posici\u00f3n final est\u00e1 condicionada por la del auto, al igual que el movimiento, y por eso  deben tener los mismos valores de la funci\u00f3n cubic-bezier (0.31, 1.58, 0.35, 1.08). Tambi\u00e9n el retraso debe ser de 1 segundo.<\/li>\n<li>Para que roten, se le aplica la propiedad  <strong>transform: rotate(-1080deg);<\/strong> y la propiedad <strong>transform-origin<\/strong>, para precisar el punto exacto del eje, sobre el que debe rotar la imagen.<\/li>\n<\/ul>\n<h5>Fuentes \/ Recursos<\/h5>\n<p><a href=\"http:\/\/www.w3schools.com\/css\/css3_transitions.asp\" target=\"_blank\"><em>Transici\u00f3n<\/em><\/a><strong><em> <\/em><\/strong>en 3schools | <a href=\"http:\/\/cubic-bezier.com\/#.17,.67,.83,.67\" target=\"_blank\"><em>Funci\u00f3n cubic-bezier<\/em><\/a><em> | <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp\" target=\"_blank\">Transform<\/a> | <a href=\"http:\/\/www.w3schools.com\/jquery\/tryit.asp?filename=tryjquery_html_addclass\" target=\"_blank\">Agregar Clase<\/a> <\/em>en W3Scool y <a href=\"http:\/\/www.w3schools.com\/jquery\/html_addclass.asp\" target=\"_blank\">agu\u00ed<\/a>&gt;<\/p>\n<h2>Problemas<\/h2>\n<ol>\n<li>Las ruedas no giraban de manera arm\u00f3nica, lo hac\u00edan como si estuvieran descentradas.S\/ Por alguna raz\u00f3n, el navegador no cog\u00eda autom\u00e1ticamente el centro de la imagen para rotar sobre los ejes. Tuve que especificar ese centro de rotaci\u00f3n con la propiedad  <strong>transform-origin<\/strong>: 50% 48% 0;.<\/li>\n<\/ol>\n<\/div>\n<h6>Ver C\u00f3digo <a title=\"Pulse para ver el c\u00f3digo\" onclick=\"return hide('mostrar_ocultar');\" href=\"#\">(+\/-)<\/a><\/h6>\n<div id=\"mostrar_ocultar\">\n<h2>JQuery<\/h2>\n<pre class=\"brush:xhtml\">\r\n<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery.min.js\"><\/script>\r\n<!--\tAgregar clases\t-->\r\n<script type=\"text\/javascript\">\r\n    $(document).ready(function() {\r\n\t    $(\"#fondo\").addClass(\"animado\");\r\n\t\t$(\"#auto\").addClass(\"animado\");\r\n\t\t$(\"#panel\").addClass(\"animado\");\r\n\t\t$(\"#titulo\").addClass(\"animado\");\r\n\t    $(\".rueda\").addClass(\"animar\");\r\n    });\r\n<\/script>\r\n<\/pre>\n<h2>CSS<\/h2>\n<pre class=\"brush:xhtml\">#banner {\r\n\twidth: 500px;\r\n\theight:320px;\r\n\tmargin: 30px auto;\r\n\tposition: relative;\r\n\t-webkit-perspective: 500px;\r\n\t-moz-perspective: 500px;\r\n\t-o-perspective: 500px;\r\n\tperspective: 500px;\r\n\toverflow: hidden;\r\n}\r\n\r\n#titulo {\r\n\tposition: absolute;\r\n\tleft: 1300px;\r\n\ttop: 10px;\r\n}\r\n\r\n#titulo.animado {\r\n\tleft: 110px;\r\n\t -webkit-transition: all .5s ease-in-out;\r\n\t -moz-transition: all .5s ease-in-out;\r\n\t -o-transition: all .5s ease-in-out;\r\n\t transition: left .5s ease-in-out;\r\n}\r\n\r\n#auto {\r\n\tposition: absolute;\r\n\ttop: 190px;\r\n\tleft: 1000px;\r\n}\r\n\r\n#auto.animado {\r\n\tleft:100px;\r\n\t-webkit-transition: all 3s ease;\r\n\t-moz-transition: all 3s ease;\r\n\t-o-transition: all 3s ease;\r\n\ttransition: all 3s \/*ease*\/cubic-bezier(\/*.42,1.35,.47,1.29*\/.31, 1.58, .35, 1.08);\r\n\t-webkit-transition-delay: 1s;\r\n\t-moz-transition-delay: 1s;\r\n\t-o-transition-delay: 1s;\r\n\ttransition-delay: 1s;\r\n}\r\n\r\n#panel {\r\n\tposition: absolute;\r\n\ttop: -1000px;\r\n\tleft: 100px;\r\n}\r\n\r\n#panel.animado {\r\n\ttop:70px;\r\n\t-webkit-transition: top 1.5s ease;\r\n\t-moz-transition: top 1.5s ease;\r\n\t-o-transition: top 1.5s ease;\r\n\ttransition: top 1.5s ease;\r\n}\r\n\r\n#rueda_1 {\r\n\tposition: absolute;\r\n\tleft: 1060px;\r\n\ttop: 227px;\r\n}\r\n\r\n#rueda_2 {\r\n\tposition: absolute;\r\n\tleft: 1290px;\r\n\ttop: 227px;\r\n}\r\n\r\n.rueda {\r\n\t-webkit-transition-property: left, opacity, -webkit-transform;\r\n\t-webkit-transition-duration: 3s, 4s, 3s;\r\n\t-webkit-transition-timing-function: ease, ease, ease-out;\r\n\t-webkit-transition-delay: 1s, .5s, 1s;\r\n\r\n\t-moz-transition-property: left, opacity, -moz-transform;\r\n\t-moz-transition-duration: 3s, 4s, 3s;\r\n\t-moz-transition-timing-function: ease, ease, ease-out;\r\n\t-moz-transition-delay: 1s, .5s, 1s;\r\n\r\n\t-o-transition-property: left, opacity, -o-transform;\r\n\t-o-transition-duration: 3s, 4s, 3s;\r\n\t-o-transition-timing-function: ease, ease, ease-out;\r\n\t-o-transition-delay: 1s, .5s, 1s;\r\n\r\n\ttransition-property: left, opacity, transform;\r\n\ttransition-duration: 3s, 4s, 3s;\r\n\ttransition-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);\r\n \ttransition-delay: 1s, .5s, 1s;\r\n}\r\n\r\n#rueda_1.animar {\r\n\tleft:158px;\r\n}\r\n\r\n#rueda_2.animar {\r\n\tleft: 367px;\r\n}\r\n\r\n.rueda.animar {\r\n\t-webkit-transform: rotate(-1080deg);\r\n\t-moz-transform: rotate(-1080deg);\r\n\t-o-transform: rotate(-1080deg);\r\n\ttransform: rotate(-1080deg);\r\n\topacity: 1;\r\n\ttransform-origin: 50% 48% 0;\r\n}\r\n<\/pre>\n<\/div>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\n            $(document).ready(function() { \n\t\t\t$(\"#fondo\").addClass(\"animado\"); \n\t\t\t$(\"#auto\").addClass(\"animado\"); \n\t\t\t$(\"#panel\").addClass(\"animado\"); \n\t\t\t$(\"#titulo\").addClass(\"animado\"); \n\t\t\t$(\".rueda\").addClass(\"animar\");\n\t\t\t });\n\/\/ ]]><\/script><br \/>\n<!--\tRepetir clases\t--><br \/>\n<script type=\"text\/javascript\">\/\/ <![CDATA[\n     function repetir(){ \n\t $(\"#fondo\").toggleClass(\"animado\"); \n\t $(\"#auto\").toggleClass(\"animado\"); \n\t $(\"#panel\").toggleClass(\"animado\"); \n\t $(\"#titulo\").toggleClass(\"animado\"); \n\t $(\".rueda\").toggleClass(\"animar\");  \n\t }\n\/\/ ]]><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Debe activar Javascript en su Navegador para ver correctamente este ejemplo. 01 Definici\u00f3n Las transiciones son animaciones simples, que permiten cambiar los valores de las propiedades CSS de manera gradual, proporcionando una duraci\u00f3n. La propiedad Transition es, por tanto, el primer paso en CSS3 para lo que luego se conseguir\u00e1 con la regla @keyframes, a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,19],"tags":[],"_links":{"self":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/610"}],"collection":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/comments?post=610"}],"version-history":[{"count":59,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/610\/revisions"}],"predecessor-version":[{"id":677,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/610\/revisions\/677"}],"wp:attachment":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/media?parent=610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/categories?post=610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/tags?post=610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}