{"id":55,"date":"2012-07-17T17:14:04","date_gmt":"2012-07-17T23:14:04","guid":{"rendered":"http:\/\/j35u5.com.mx\/blog\/?p=55"},"modified":"2014-10-31T12:01:28","modified_gmt":"2014-10-31T18:01:28","slug":"transiciones-en-css3","status":"publish","type":"post","link":"https:\/\/daimonikos.com\/blog\/transiciones-en-css3\/","title":{"rendered":"Transiciones en CSS3"},"content":{"rendered":"<p>Las trancisiones en CSS3 nos permiten animar elementos y sus propiedades sin necesidad de usar Flash o JavaScript.<\/p>\n<p>Un ejemplo ser\u00eda el siguiente, coloca el mouse sobre el siguiente recuadro:<\/p>\n<style>\n#example1{\n\tbackground:#F00;\n\tborder-radius:5px;\n\theight:50px;\n\tmargin:0 auto;\n\t-webkit-transition:all .5s ease;\n\t-moz-transition:all .5s ease;\n\t-o-transition:all .5s ease;\n\ttransition:all .5s ease;\n\twidth:50px;\n}\n#example1:hover{\n\tbackground:#00F;\n\twidth:100px;\n}\n<\/style>\n<div id=\"example1\"><\/div>\n<h3>Soporte de navegadores<\/h3>\n<p>Internet explorer no soporta la propiedad <em>transition<\/em>.<br \/>\nChrome y Safari requieren el prefijo -webkit-<br \/>\nFirefox requiere el prefijo -moz-<br \/>\nOpera requiere el prefijo -o-<\/p>\n<h3>\u00a1Tengo un navegador compatible! \u00bfY ahora?<\/h3>\n<p>Las transiciones en CSS3 van de un estado inicial a uno final, cambiando una o varias propiedades de forma gradual. Para hacer esto es necesario definir que propiedad vamos a cambiar y cu\u00e1nto tardar\u00e1 en hacerlo.<\/p>\n<p>En el siguiente ejemplo cambiaremos la altura de un <em>div<\/em>:<\/p>\n<pre class=\"prettyprint\">\r\ndiv{\r\n\tbackground:#FF0;\r\n\theight:100px;\r\n\tmargin:0 auto;\r\n\twidth:100px;\r\n\t\r\n\t-webkit-transition: height .5s ease-in;\r\n\t-moz-transition: height .5s ease-in;\r\n\t-o-transition: height .5s ease-in;\r\n\ttransition: height .5s ease-in;\r\n}\r\n<\/pre>\n<p>Por defecto la duraci\u00f3n de la transici\u00f3n es 0, por lo que si no se especifica, no tendr\u00e1 efecto.<\/p>\n<p>Ahora necesitamos un detonante que realice la transici\u00f3n. Utilizaremos el pseudoselector <em>:hover<\/em>.<\/p>\n<pre class=\"prettyprint\">\r\ndiv:hover{\r\n\theight:150px;\r\n}\r\n<\/pre>\n<p>El resultado es el siguiente:<\/p>\n<style>\n#example2{\n\tbackground:#FF0;\n\theight:100px;\n\tmargin:0 auto;\n\twidth:100px;\n\t-webkit-transition: all .5s ease-in;\n\t-moz-transition: all .5s ease-in;\n\t-o-transition: all .5s ease-in;\n\ttransition: all .5s ease-in;\n}\n#example2:hover{\n\theight:150px;\n}\n<\/style>\n<div id=\"example2\"><\/div>\n<p>Si queremos cambiar m\u00e1s de una propiedad, debemos separarlas con comas:<\/p>\n<pre class=\"prettyprint\">\r\ndiv:hover{\r\n\t-webkit-transition: height .5s, width 1s, background .7s;\r\n\t-moz-transition: height .5s, width 1s, background .7s;\r\n\t-o-transition: height .5s, width 1s, background .7s;\r\n\ttransition: height .5s, width 1s, background .7s;\r\n}\r\n<\/pre>\n<p>Estas son las propiedades de transici\u00f3n que se pueden utilizar:<\/p>\n<p><strong><em>transition<\/em><\/strong> Propiedad general que define todos los par\u00e1metros<br \/>\n<strong><em>transition-property<\/em><\/strong> Especifica que propiedad cambiar\u00e1 la transici\u00f3n, pueden ser todas (all)<br \/>\n<strong><em>transition-duration<\/em><\/strong> Define la duraci\u00f3n de la transici\u00f3n<br \/>\n<strong><em>transition-timing-function<\/em><\/strong> Especifica el tipo de transici\u00f3n que ejecutar\u00e1, <em>ease<\/em> por defecto.<br \/>\n<strong><em>transition-delay<\/em><\/strong> Define si habr\u00e1 un retraso para iniciar la transici\u00f3n, es 0 por defecto.<\/p>\n<pre class=\"prettyprint\">\r\ndiv{\r\n\t-webkit-transition-property: width;\r\n\t-webkit-transition-duration: 1s;\r\n\t-webkit-transition-timing-function: linear;\r\n\t-webkit-transition-delay: .5s;\r\n\t\r\n\t-moz-transition-property: width;\r\n\t-moz-transition-duration: 1s;\r\n\t-moz-transition-timing-function: linear;\r\n\t-moz-transition-delay: .5s;\r\n\t\r\n\t-o-transition-property: width;\r\n\t-o-transition-duration: 1s;\r\n\t-o-transition-timing-function: linear;\r\n\t-o-transition-delay: .5s;\r\n\t\r\n\ttransition-property: width;\r\n\ttransition-duration: 1s;\r\n\ttransition-timing-function: linear;\r\n\ttransition-delay: .5s;\r\n}\r\n<\/pre>\n<p>Obviamente se puede definir esta misma transici\u00f3n con la propiedad general:<\/p>\n<pre class=\"prettyprint\">\r\ndiv{\r\n\t-webkit-transition: width 1s linear .5s;\r\n\t-moz-transition: width 1s linear .5s;\r\n\t-o-transition: width 1s linear .5s;\r\n\ttransition: width 1s linear .5s;\r\n}\r\n<\/pre>\n<p>Los diferentes tipos de transici\u00f3n son <em>linear<\/em>, <em>ease<\/em>, <em>ease-in<\/em>, <em>ease-out<\/em>, <em>ease-in-out<\/em>, <em>cubic-bezier(n,n,n,n)<\/em>.<\/p>\n<p>Para el valor de <em>cubic-bezier<\/em> las n deben ser enteros.<\/p>\n<p>En el siguiente video podemos ver la utilizaci\u00f3n de las transiciones:<\/p>\n<p><iframe loading=\"lazy\" width=\"720\" height=\"480\" src=\"http:\/\/www.youtube.com\/embed\/mp8ACRTijKQ\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las trancisiones en CSS3 nos permiten animar elementos y sus propiedades sin necesidad de usar Flash o JavaScript. Un ejemplo ser\u00eda el siguiente, coloca el mouse sobre el siguiente recuadro: Soporte de navegadores Internet explorer no soporta la propiedad transition. Chrome y Safari requieren el prefijo -webkit- Firefox requiere el prefijo -moz- Opera requiere el [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":178,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[10,14,15],"class_list":["post-55","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css3","tag-transicion","tag-transition"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":0,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media\/178"}],"wp:attachment":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}