{"id":14125,"date":"2011-09-06T18:57:44","date_gmt":"2011-09-07T01:57:44","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14125"},"modified":"2022-09-30T12:20:02","modified_gmt":"2022-09-30T19:20:02","slug":"transition","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition\/","title":{"rendered":"transition"},"content":{"rendered":"\n<p>The <code>transition<\/code> property is a shorthand property used to represent up to four transition-related longhand properties:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  transition: background-color 0.5s ease;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<p><code>transition<\/code> properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. So, if we have, say, a box with a red background that we want to change to a green background when it is hovered, we can reach right for the <code>transition<\/code> property to move between background colors:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zqpEg\" src=https://css-tricks.com/"////codepen.io//anon//embed//zqpEg?height=300&amp;theme-id=1&amp;slug-hash=zqpEg&amp;default-tab=css,result\%22 height=\"300\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zqpEg\" title=\"CodePen Embed zqpEg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-specifying-which-properties-to-transition\">Specifying which properties to transition <\/h3>\n\n\n<p>Notice that we&#8217;ve called out the <code>background-color<\/code> property in the <code>transition<\/code> declaration. That tells the browser that we&#8217;re planning to transition background colors and nothing else when a transition occurs between hovered and non-hovered states. Notice, too, that we told the browser that the transition should take two seconds and follow and <code>ease-out<\/code> <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//transition-timing-function///">timing function<\/a>, which means the transition starts fast, then slows down towards the end.<\/p>\n\n\n\n<p>You can specify a particular property as we have above, or use a value of <code>all<\/code> to refer to transition properties:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"2\"><code markup=\"tt\">.element {\n  transition: all 0.5s ease;\n  background: red;\n  padding: 10px;\n}\n.element:hover {\n  background: green;\n  padding: 20px;\n}<\/code><\/pre>\n\n\n\n<p><code>all<\/code> specified for the <code>transition-property<\/code> portion of the shorthand. You may also comma separate value sets to do different transitions on different properties:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  transition: background 0.2s ease,\n              padding 0.8s linear;\n}<\/code><\/pre>\n\n\n\n<p>For the most part, the order of the values does not matter &#8212; unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.<\/p>\n\n\n\n<p>Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of <a href=https://css-tricks.com/"http:////www.w3.org//TR//css3-transitions//#animatable-properties\" rel=\"noopener\">which properties are animatable<\/a>.<\/p>\n\n\n\n<p>By specifying the transition on the element itself, you define the transition to occur in both directions. That is, when the styles are changed (e.g. on hover on), they properties will transition, and when the styles change back (e.g. on hover off) they will transition. For example, the following demo transitions on hover, but not on hover off:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zohgt\" src=https://css-tricks.com/"////codepen.io//anon//embed//zohgt?height=400&amp;theme-id=1&amp;slug-hash=zohgt&amp;default-tab=css,result\%22 height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zohgt\" title=\"CodePen Embed zohgt\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=https://css-tricks.com/"http:////caniuse.com//#feat=css-transitions\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">5*<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">5.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">126<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">2.1*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">6.0-6.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"css-tricks-that-use-transition\">CSS tricks that use <code>transition<\/code><\/h2>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2020-03-03\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 3, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//4-ways-to-animate-the-color-of-a-text-link-on-hover///">\n      4 Ways to Animate the Color of a Text Link on Hover    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//katherinekato///" aria-label=\"Author page of Katherine Kato\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2020//12//avatar_2020.png?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//katherinekato///">\n      Katherine Kato    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2022-02-15\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 22, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-link-hover-effects///">\n      6 Creative Ideas for CSS Link Hover Effects    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//harshilpatel///" aria-label=\"Author page of Harshil Patel\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//3038d519a7e6e629b9b20b5c3261b36e?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/3038d519a7e6e629b9b20b5c3261b36e?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//harshilpatel///">\n      Harshil Patel    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2022-01-07\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 7, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//adam-argyles-sick-mouse-out-css-hover-effect///">\n      Adam Argyle&#8217;s Sick Mouse-Out CSS Hover Effect    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-14125\">\n\n  <time datetime=\"2013-01-03\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 3, 2013  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//al-you-need-to-know-about-css-transitions///">\n      All You Need to Know About CSS Transitions    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2013-10-11\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 4, 2016  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animated-media-queries///">\n      Animated Media Queries    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2017-12-05\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 6, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-border///">\n      Animating Border    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//shshaw///" aria-label=\"Author page of Stephen Shaw\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7c4dc6deb1a5c91d9c6ff74c8595b51d?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7c4dc6deb1a5c91d9c6ff74c8595b51d?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//shshaw///">\n      Stephen Shaw    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2021-07-14\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 14, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//build-complex-css-transitions-using-custom-properties-and-cubic-bezier///">\n      Build Complex CSS Transitions using Custom Properties and cubic-bezier()    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///" aria-label=\"Author page of Temani Afif\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//2c12e74c8162614e08a31d704ed9e193?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/2c12e74c8162614e08a31d704ed9e193?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2013-09-17\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 13, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//controlling-css-animations-transitions-javascript///">\n      Controlling CSS Animations and Transitions with JavaScript    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//zachsaucier///" aria-label=\"Author page of Zach Saucier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//44128d17e23187413cded5010698ecb8?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/44128d17e23187413cded5010698ecb8?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//zachsaucier///">\n      Zach Saucier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2022-04-27\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 26, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//cool-hover-effects-using-background-properties///">\n      Cool Hover Effects That Use Background Properties    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///" aria-label=\"Author page of Temani Afif\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//2c12e74c8162614e08a31d704ed9e193?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/2c12e74c8162614e08a31d704ed9e193?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2022-05-13\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 26, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//cool-hover-effects-that-use-css-text-shadow///">\n      Cool Hover Effects That Use CSS Text Shadow    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///" aria-label=\"Author page of Temani Afif\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//2c12e74c8162614e08a31d704ed9e193?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/2c12e74c8162614e08a31d704ed9e193?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2018-11-15\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 15, 2018  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-animations-and-transitions-in-email///">\n      CSS Animations and Transitions in Email    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2021-11-08\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 8, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-grid-can-do-auto-height-transitions///">\n      CSS Grid Can Do Auto Height Transitions    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-14125\">\n\n  <time datetime=\"2010-12-09\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 9, 2010  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-transition-timing///">\n      CSS Transition Timing    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2011-02-03\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 3, 2011  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//different-transitions-for-hover-on-hover-off///">\n      Different Transitions for Hover On \/ Hover Off    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2020-10-14\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 14, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//how-to-create-a-realistic-motion-blur-with-css-transitions///">\n      How to Create a Realistic Motion Blur with CSS Transitions    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//nealevanfleet///" aria-label=\"Author page of Neale Van Fleet\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//d7a76198094edbb412cf4d525b16d545?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/d7a76198094edbb412cf4d525b16d545?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//nealevanfleet///">\n      Neale Van Fleet    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-14125\">\n\n  <time datetime=\"2012-03-19\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 19, 2012  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//maintaining-css-style-states-using-infinite-transition-delays///">\n      Maintaining CSS Style States using \u201cInfinite\u201d Transition Delays    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2019-09-23\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 23, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//link-underlines-that-animate-into-block-backgrounds///">\n      Link Underlines That Animate Into Block Backgrounds    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2018-10-04\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 4, 2018  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//moving-backgrounds-with-mouse-position///">\n      Moving Backgrounds With Mouse Position    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2019-09-03\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 3, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//recreating-netlifys-neat-o-sliding-button-effect///">\n      Recreating Netlify&#8217;s Neat-o Sliding Button Effect    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2021-04-27\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 27, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//shared-element-transitions///">\n      Shared Element Transitions    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2019-08-14\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 14, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//staggered-css-transitions///">\n      Staggered CSS Transitions    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2012-06-26\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 11, 2013  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//transition-delay-delays///">\n      Transition Delay Delays    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2018-06-01\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 26, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//the-state-of-changing-gradients-with-css-transitions-and-animations///">\n      The State of Changing Gradients with CSS Transitions and Animations    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///" aria-label=\"Author page of Ana Tudor\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//bee436794e066a5423040cf673c7506f?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/bee436794e066a5423040cf673c7506f?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///">\n      Ana Tudor    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-14125\">\n\n  <time datetime=\"2017-07-12\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 12, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//transitioning-gradients///">\n      Transitioning Gradients    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2011-08-16\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 13, 2016  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//transitions-and-animations-on-css-generated-content///">\n      Transitions and Animations on CSS Generated Content    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2017-03-10\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 3, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//using-css-transitions-auto-dimensions///">\n      Using CSS Transitions on Auto Dimensions    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//brundolf///" aria-label=\"Author page of Brandon Smith\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8e1cb379a74478b5ac44bc5b227bd802?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8e1cb379a74478b5ac44bc5b227bd802?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//brundolf///">\n      Brandon Smith    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-14125\">\n\n  <time datetime=\"2015-12-10\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 10, 2015  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//using-multi-step-animations-transitions///">\n      Using Multi-Step Animations and Transitions    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-14125\">\n\n  <time datetime=\"2013-03-27\" title=\"Originally published Sep 6, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 27, 2013  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//you-can-transition-z-index///">\n      You Can Transition z-index    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"http:////www.w3.org//TR//css3-transitions//#transition-shorthand-property\" rel=\"noopener\">CSS Transitions Specification<\/a> (W3C)<\/li><li><a href=https://css-tricks.com/"https:////www.digitalocean.com//community//tutorials//css-transition-shorthand?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\%22 rel=\"noopener\">CSS Transition Shorthand Property<\/a> (DigitalOcean)<\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//an-interactive-guide-to-css-transitions///">An Interactive Guide to CSS Transitions<\/a> (Josh Comeau)<\/li><li><a href=https://css-tricks.com/"https:////www.digitalocean.com//community//tutorials//css-will-change?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\%22 rel=\"noopener\">CSS <code>will-change<\/code> Property: When and When Not to Use It<\/a> (DigitalOcean)<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The transition property is a shorthand property used to represent up to four transition-related longhand properties: Syntax Demo transition properties [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14125"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14125"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14125\/revisions"}],"predecessor-version":[{"id":374183,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14125\/revisions\/374183"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14125"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}