{"id":167,"date":"2023-05-29T16:05:49","date_gmt":"2023-05-29T14:05:49","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?page_id=167"},"modified":"2023-05-30T13:08:51","modified_gmt":"2023-05-30T11:08:51","slug":"transicions","status":"publish","type":"page","link":"https:\/\/user0.gesem.es\/blog\/transicions\/","title":{"rendered":"Transicions"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A classe hem aplicat transicions als nostres enlla\u00e7os amb la classe <em>pildora<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.pildora{<br>...<br>transition-property: all;<br>transition-duration:1s;<br>transition-time-function:ease-in;<br>transition-delay: 0s;<br>}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Els quatre par\u00e0metres d&#8217;una transici\u00f3 s\u00f3n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Propietats CSS que volem que canviin de forma gradual (all = totes; font-size per el cos de la lletra; color per el color;&#8230;)<\/li>\n\n\n\n<li>Durada de la transici\u00f3. Temps que volem que trigui a passar d&#8217;un estat a un altres<\/li>\n\n\n\n<li>Distribuci\u00f3 del canvi en el temps (lineal? gradual de menys a m\u00e9s? gradual de m\u00e9s a menys?&#8230;)<\/li>\n\n\n\n<li>Temps de retr\u00e0s a l&#8217;hora de fer la transici\u00f3<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La durada i el temps de retr\u00e0s es poden especificar en segons (1s, 0.5s,..) o en m\u00edl\u00b7l\u00e9ssimes de segons (1000ms, 500ms,&#8230;)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Els 4 valors de la transicions es poden indicar per separat o de forma resumida:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">transition: all 1s ease-in 0s;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En aquest cas, l&#8217;ordre sempre haur\u00e0 de ser el mateix:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>transition: propietat\/s durada estil retr\u00e0s<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pots consultar aqu\u00ed tots els possibles valors:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/transition\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/transition<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A internet pots trobar unes quantes webs que t&#8217;ajudaran a generar el CSS de les transicions. Aqu\u00ed dos exemples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/angrytools.com\/css-generator\/transition\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/angrytools.com\/css-generator\/transition\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.cssportal.com\/css-cubic-bezier-generator\/\">https:\/\/www.cssportal.com\/css-cubic-bezier-generator\/<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Propietat en mode de proves a la vista<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propietat transition forma part de les propietats afegides a la \u00faltima revissi\u00f3 del CSS (CSS 3). Per aix\u00f2, per alguns navegadors est\u00e0 en mode de proves. Quan fem servir aquesta propietat, ens haurem d&#8217;assegurar d&#8217;escriure-la a prova de qualsevol navegador. Per ajudar-te a fer-ho, pots fer servir aquesta web:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/autoprefixer.github.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/autoprefixer.github.io\/<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"552\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/imagen-8.png\" alt=\"\" class=\"wp-image-170\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/imagen-8.png 682w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/05\/imagen-8-300x243.png 300w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group exercici\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En aquesta web pots trobar altres propietats de CSS 3 que pots fer servir. T&#8217;animes a aplicar ombra al text de l&#8217;h1 del teu exercici (pioneres)?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/css3generator.com\/\">https:\/\/css3generator.com\/<\/a><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A classe hem aplicat transicions als nostres enlla\u00e7os amb la classe pildora Els quatre par\u00e0metres d&#8217;una transici\u00f3 s\u00f3n: La durada i el temps de retr\u00e0s es poden especificar en segons (1s, 0.5s,..) o en m\u00edl\u00b7l\u00e9ssimes de segons (1000ms, 500ms,&#8230;) Els 4 valors de la transicions es poden indicar per separat o de forma resumida: transition:&hellip; <a class=\"more-link\" href=\"https:\/\/user0.gesem.es\/blog\/transicions\/\">Continueu llegint <span class=\"screen-reader-text\">Transicions<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-167","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":4,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/167\/revisions"}],"predecessor-version":[{"id":183,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/167\/revisions\/183"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}